// Quill Keyboard — logo lockup + sticky glass nav
function AkLogo({ size = 30, light = false, mono = false }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <img src="assets/quill-mark.svg" width={size} height={size} alt="Quill Keyboard" style={{ display: 'block' }} />
      <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: size * 0.62, letterSpacing: '-0.03em',
        color: light ? '#fff' : 'var(--fg1)' }}>
        {(light || mono) ? <span>Quill</span> : <span style={{ background: 'linear-gradient(135deg,#2E7BFF,#6A5CFF)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>Quill</span>}
        {' '}Keyboard
      </span>
    </span>
  );
}

const APP_STORE_URL = 'https://apps.apple.com/la/app/quill-keyboard/id6781157756';

function AppStoreBadge({ soft = false, comingSoon = false }) {
  return (
    <a href={APP_STORE_URL} target="_blank" rel="noopener" className={'appstore' + (soft ? ' appstore--soft' : '')} aria-label="Download on the App Store">
      <Icon name="apple" size={26} color="#fff" fill="#fff" stroke={0} />
      <span style={{ display: 'flex', flexDirection: 'column' }}>
        <span className="sub">{comingSoon ? 'Coming soon to the' : 'Download on the'}</span>
        <span className="main">App Store</span>
      </span>
    </a>
  );
}

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [['How it works', '#howitworks'], ['Actions', '#actions'], ['Privacy', '#privacy'], ['FAQ', '#faq']];
  return (
    <div style={{ position: 'sticky', top: 14, zIndex: 50, padding: '0 16px' }}>
      <div className="wrap" style={{ padding: 0 }}>
        <nav className="glass-card" style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '9px 12px 9px 16px', borderRadius: 999,
          boxShadow: scrolled ? 'var(--shadow-lg)' : 'var(--glass-shadow)',
          transition: 'box-shadow .3s var(--ease-out)' }}>
          <AkLogo size={26} />
          <div className="nav-links" style={{ display: 'flex', gap: 28 }}>
            {links.map(([l, href]) => (
              <a key={l} href={href} style={{ color: 'var(--fg2)', textDecoration: 'none', fontSize: 15, fontWeight: 500 }}
                 onMouseEnter={e => e.currentTarget.style.color = 'var(--fg1)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--fg2)'}>{l}</a>
            ))}
          </div>
          <a href={APP_STORE_URL} target="_blank" rel="noopener" className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 15 }}>
            <Icon name="apple" size={17} color="#fff" fill="#fff" stroke={0} />
            <span className="nav-cta-text">Get the app</span>
          </a>
        </nav>
      </div>
    </div>
  );
}
Object.assign(window, { Nav, AkLogo, AppStoreBadge, APP_STORE_URL });