// Vault — Marketing site components
// Single-page dark cosmic landing. Uses VaultLogo (logo.jsx),
// Avatar/RANK_PALETTES (vault-avatars.jsx), and IOSDevice (ios-frame.jsx).

const { useState, useEffect, useRef } = React;

// ===================================================================
// SHARED PRIMITIVES
// ===================================================================
function GradWord({ children, from = '#e9d7ff', via = '#a378ff', to = '#7a44ee' }) {
  return (
    <span style={{
      background: `linear-gradient(100deg, ${from} 0%, ${via} 55%, ${to} 100%)`,
      WebkitBackgroundClip: 'text', backgroundClip: 'text',
      color: 'transparent', WebkitTextFillColor: 'transparent',
    }}>{children}</span>
  );
}

function Eyebrow({ children, color = '#a378ff' }) {
  return (
    <div style={{
      fontSize: 12, fontWeight: 600, letterSpacing: '0.24em',
      textTransform: 'uppercase', color,
      display: 'inline-flex', alignItems: 'center', gap: 10,
      whiteSpace: 'nowrap',
    }}>
      <span style={{
        width: 24, height: 1, background: `linear-gradient(90deg, transparent, ${color})`,
      }}/>
      {children}
    </div>
  );
}

function SectionHeader({ eyebrow, title, sub, align = 'left', maxWidth = 720 }) {
  return (
    <div style={{
      textAlign: align, maxWidth,
      margin: align === 'center' ? '0 auto' : '0',
      marginBottom: 64,
    }}>
      {eyebrow && <div style={{ marginBottom: 18 }}><Eyebrow>{eyebrow}</Eyebrow></div>}
      <h2 style={{
        fontSize: 'clamp(36px, 4vw, 56px)',
        fontWeight: 600, letterSpacing: '-0.025em',
        lineHeight: 1.05, margin: 0, color: '#fff',
      }}>{title}</h2>
      {sub && (
        <p style={{
          marginTop: 18, fontSize: 17, lineHeight: 1.55,
          color: '#9089b3', maxWidth: 560,
          marginLeft: align === 'center' ? 'auto' : 0,
          marginRight: align === 'center' ? 'auto' : 0,
        }}>{sub}</p>
      )}
    </div>
  );
}

function PrimaryCTA({ children, href = '#', size = 'lg', style }) {
  const sizes = {
    lg: { padding: '16px 28px', fontSize: 15 },
    md: { padding: '12px 22px', fontSize: 14 },
  };
  return (
    <a href={href} style={{
      ...sizes[size],
      display: 'inline-flex', alignItems: 'center', gap: 10,
      background: 'linear-gradient(135deg, #a378ff 0%, #7a44ee 100%)',
      color: '#fff', fontWeight: 600, letterSpacing: '-0.005em',
      borderRadius: 999, textDecoration: 'none', whiteSpace: 'nowrap',
      boxShadow: '0 12px 32px -10px rgba(122,68,238,0.65), inset 0 1px 0 rgba(255,255,255,0.2)',
      border: '1px solid rgba(200,166,255,0.3)',
      transition: 'transform 0.2s, box-shadow 0.2s',
      ...style,
    }}
    onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-2px)';e.currentTarget.style.boxShadow='0 18px 40px -10px rgba(122,68,238,0.75), inset 0 1px 0 rgba(255,255,255,0.25)';}}
    onMouseLeave={e=>{e.currentTarget.style.transform='translateY(0)';e.currentTarget.style.boxShadow='0 12px 32px -10px rgba(122,68,238,0.65), inset 0 1px 0 rgba(255,255,255,0.2)';}}
    >{children}</a>
  );
}

function GhostCTA({ children, href = '#', size = 'lg', style }) {
  const sizes = {
    lg: { padding: '15px 26px', fontSize: 15 },
    md: { padding: '11px 20px', fontSize: 14 },
  };
  return (
    <a href={href} style={{
      ...sizes[size],
      display: 'inline-flex', alignItems: 'center', gap: 10,
      background: 'rgba(255,255,255,0.04)',
      color: '#fff', fontWeight: 500,
      borderRadius: 999, textDecoration: 'none',
      border: '1px solid rgba(255,255,255,0.12)',
      backdropFilter: 'blur(12px)',
      ...style,
    }}>{children}</a>
  );
}

// ===================================================================
// NAV BAR
// ===================================================================
function NavBar() {
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      padding: '20px 32px',
      backdropFilter: 'blur(20px)',
      background: 'rgba(7,4,14,0.65)',
      borderBottom: '1px solid rgba(255,255,255,0.05)',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
      }}>
        <a href="#" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
          <div style={{ width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <VaultLogo size={36} idSuffix="nav"/>
          </div>
          <span style={{
            fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em', color: '#fff',
          }}>Vault</span>
        </a>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 32,
          fontSize: 14, color: '#aaa3cc',
        }} className="nav-links">
          {['How it works', 'Ranks', 'Pricing', 'FAQ'].map(l => (
            <a key={l} href={`#${l.toLowerCase().replace(/[\s]/g,'-')}`} style={{
              color: '#aaa3cc', textDecoration: 'none', transition: 'color 0.2s',
            }}
            onMouseEnter={e=>e.currentTarget.style.color='#fff'}
            onMouseLeave={e=>e.currentTarget.style.color='#aaa3cc'}
            >{l}</a>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <a href="#" style={{
            fontSize: 14, color: '#d4cdef', textDecoration: 'none', fontWeight: 500,
          }}>Sign in</a>
          <PrimaryCTA size="md">Get the app</PrimaryCTA>
        </div>
      </div>
    </nav>
  );
}

// ===================================================================
// HERO
// ===================================================================
function LiveTicker() {
  const [count, setCount] = useState(847);
  useEffect(() => {
    const t = setInterval(() => {
      setCount(c => c + (Math.random() < 0.6 ? 1 : -1) + (Math.random() < 0.3 ? 1 : 0));
    }, 1800);
    return () => clearInterval(t);
  }, []);
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      padding: '8px 14px 8px 10px',
      borderRadius: 999,
      background: 'rgba(90,230,200,0.08)',
      border: '1px solid rgba(90,230,200,0.22)',
      fontSize: 13, color: '#5ae6c8', fontWeight: 500,
    }}>
      <span style={{
        position: 'relative', width: 8, height: 8, borderRadius: '50%',
        background: '#5ae6c8',
      }}>
        <span style={{
          position: 'absolute', inset: -3, borderRadius: '50%',
          background: '#5ae6c8', opacity: 0.4,
          animation: 'ping 1.6s ease-out infinite',
        }}/>
      </span>
      <span style={{ fontVariantNumeric: 'tabular-nums', color: '#fff', fontWeight: 700 }}>
        {count.toLocaleString()}
      </span>
      challenges live right now
    </div>
  );
}

function FloatingAvatars() {
  // Decorative floating rank avatars in hero bg
  const positions = [
    { rank: 'addicted',    glyph: 'phone',   x: '8%',   y: '15%', size: 64,  delay: 0,   blur: 1 },
    { rank: 'scroller',    glyph: 'feed',    x: '88%',  y: '22%', size: 72,  delay: 0.4, blur: 0 },
    { rank: 'seeker',      glyph: 'compass', x: '4%',   y: '70%', size: 80,  delay: 0.8, blur: 0 },
    { rank: 'lucid',       glyph: 'eye',     x: '92%',  y: '78%', size: 68,  delay: 1.2, blur: 1 },
    { rank: 'clairvoyant', glyph: 'crystal', x: '15%',  y: '88%', size: 56,  delay: 1.6, blur: 2 },
    { rank: 'seeker',      glyph: 'compass', x: '78%',  y: '8%',  size: 48,  delay: 0.2, blur: 2 },
  ];
  return (
    <>
      {positions.map((p, i) => (
        <div key={i} style={{
          position: 'absolute', left: p.x, top: p.y,
          width: p.size, height: p.size,
          filter: p.blur ? `blur(${p.blur}px)` : 'none',
          opacity: 0.5,
          animation: `float ${6 + i}s ease-in-out ${p.delay}s infinite`,
          pointerEvents: 'none',
        }}>
          <Avatar avatar={{ id: 'hero-' + i, glyph: p.glyph }} tone={p.rank} size={p.size} frame={true}/>
        </div>
      ))}
    </>
  );
}

function Hero() {
  return (
    <section style={{
      position: 'relative',
      padding: '120px 32px 80px',
      overflow: 'hidden',
    }}>
      {/* Cosmic background layers */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `
          radial-gradient(900px 600px at 50% -10%, rgba(140,70,220,0.28), transparent 60%),
          radial-gradient(700px 400px at 15% 90%, rgba(90,40,200,0.18), transparent 60%),
          radial-gradient(700px 500px at 90% 70%, rgba(255,70,90,0.08), transparent 60%)
        `,
      }}/>
      {/* Star dust */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.6,
        backgroundImage: `
          radial-gradient(1px 1px at 23% 17%, #fff, transparent),
          radial-gradient(1px 1px at 67% 34%, #fff, transparent),
          radial-gradient(1px 1px at 81% 78%, #fff, transparent),
          radial-gradient(1px 1px at 12% 56%, #c8a6ff, transparent),
          radial-gradient(1px 1px at 44% 88%, #fff, transparent),
          radial-gradient(1px 1px at 92% 14%, #c8a6ff, transparent),
          radial-gradient(1px 1px at 36% 62%, #fff, transparent),
          radial-gradient(2px 2px at 71% 51%, rgba(255,255,255,0.5), transparent)
        `,
        backgroundSize: '100% 100%',
      }}/>
      <FloatingAvatars/>

      <div style={{
        position: 'relative', maxWidth: 980, margin: '0 auto',
        textAlign: 'center',
      }}>
        <div style={{ marginBottom: 32 }}>
          <LiveTicker/>
        </div>

        <h1 style={{
          fontSize: 'clamp(48px, 7.5vw, 104px)',
          fontWeight: 600, letterSpacing: '-0.04em',
          lineHeight: 0.96, margin: 0,
          color: '#fff',
        }}>
          Lock your phone.<br/>
          <GradWord>Outlast your friends.</GradWord>
        </h1>
        <p style={{
          marginTop: 28,
          fontSize: 'clamp(17px, 1.5vw, 21px)',
          lineHeight: 1.5,
          color: '#aaa3cc',
          maxWidth: 620, margin: '28px auto 0',
        }}>
          Vault turns screen-time into a multiplayer game. Host a challenge, invite friends, and the last one not scrolling climbs the ranks. Real ELO. Real bragging rights.
        </p>

        <div style={{
          marginTop: 44,
          display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap',
        }}>
          <AppStoreBadge store="apple"/>
          <AppStoreBadge store="google"/>
        </div>

        <div style={{
          marginTop: 28,
          fontSize: 13, color: '#6a6488',
          display: 'flex', gap: 24, justifyContent: 'center', flexWrap: 'wrap',
        }}>
          <span>★ 4.8 · 12k ratings</span>
          <span>·</span>
          <span>Featured in App Store · Health</span>
          <span>·</span>
          <span>Free to play</span>
        </div>
      </div>

      {/* hero device cluster */}
      <div style={{
        position: 'relative', marginTop: 96, maxWidth: 1180, margin: '96px auto 0',
        display: 'flex', justifyContent: 'center', alignItems: 'flex-end',
        gap: 0, perspective: 1400,
      }}>
        <div style={{ transform: 'translateY(40px) rotate(-6deg)', filter: 'drop-shadow(0 30px 60px rgba(60,30,160,0.6))', zIndex: 1 }}>
          <ScaledIOS scale={0.78}><LobbyMock/></ScaledIOS>
        </div>
        <div style={{ filter: 'drop-shadow(0 50px 100px rgba(122,68,238,0.7))', zIndex: 3, margin: '0 -40px' }}>
          <ScaledIOS scale={1}><ChallengeMock/></ScaledIOS>
        </div>
        <div style={{ transform: 'translateY(40px) rotate(6deg)', filter: 'drop-shadow(0 30px 60px rgba(60,30,160,0.6))', zIndex: 1 }}>
          <ScaledIOS scale={0.78}><EndScreenMock/></ScaledIOS>
        </div>
      </div>
    </section>
  );
}

function ScaledIOS({ children, scale = 1 }) {
  return (
    <div style={{ transform: `scale(${scale})`, transformOrigin: 'bottom center' }}>
      <IOSDevice width={360} height={780} dark>{children}</IOSDevice>
    </div>
  );
}

function AppStoreBadge({ store }) {
  return (
    <a href="#" style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      padding: '12px 20px',
      background: '#000',
      border: '1px solid rgba(255,255,255,0.16)',
      borderRadius: 14,
      textDecoration: 'none',
      transition: 'transform 0.2s, border-color 0.2s',
    }}
    onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-2px)';e.currentTarget.style.borderColor='rgba(200,166,255,0.4)';}}
    onMouseLeave={e=>{e.currentTarget.style.transform='translateY(0)';e.currentTarget.style.borderColor='rgba(255,255,255,0.16)';}}
    >
      {store === 'apple' ? (
        <svg width="26" height="26" viewBox="0 0 24 24" fill="#fff">
          <path d="M17.05 20.28c-.98.95-2.05.86-3.08.43-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.43C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
        </svg>
      ) : (
        <svg width="24" height="26" viewBox="0 0 24 24">
          <path d="M3.6 1.5c-.4.4-.6 1-.6 1.6V21c0 .6.2 1.2.6 1.6l9.4-9.4-9.4-10.7zm12.5 11.7l-2.7-2.7L4.4 1.4 16.1 8l-.1.1zM4.4 22.6l9-9.2 2.7-2.7-3.6 3.7L4.4 22.6zm15.7-11l-2.5 1.4-3-3 3-3 2.5 1.4c1.3.7 1.3 2.5 0 3.2z" fill="#fff"/>
        </svg>
      )}
      <div style={{ textAlign: 'left', display: 'flex', flexDirection: 'column', lineHeight: 1.1 }}>
        <span style={{ fontSize: 10, color: '#aaa', letterSpacing: '0.05em', whiteSpace: 'nowrap' }}>
          {store === 'apple' ? 'Download on the' : 'GET IT ON'}
        </span>
        <span style={{ fontSize: 16, color: '#fff', fontWeight: 600, letterSpacing: '-0.01em', whiteSpace: 'nowrap', marginTop: 2 }}>
          {store === 'apple' ? 'App Store' : 'Google Play'}
        </span>
      </div>
    </a>
  );
}

window.NavBar = NavBar;
window.Hero = Hero;
window.GradWord = GradWord;
window.Eyebrow = Eyebrow;
window.SectionHeader = SectionHeader;
window.PrimaryCTA = PrimaryCTA;
window.GhostCTA = GhostCTA;
window.AppStoreBadge = AppStoreBadge;