import React, { useState } from 'react'
import { Menu, X, Play, Search } from 'lucide-react'

// Responsive header component with YouTube Shorts button, logo, styled categories in Hindi
// TailwindCSS classes are used for styling.

export default function Header({ categories, logoSrc }) {
  const [open, setOpen] = useState(false)

  const defaultCategories = [
    'होम',
    'नवीनतम',
    'मनोरंजन',
    'ऑटो',
    'टेक',
    'खेल',
    'लाइफस्टाइल',
  ]

  const cats = Array.isArray(categories) && categories.length > 0 ? categories : defaultCategories

  return (
    <header className="w-full bg-gradient-to-r from-red-700 via-red-600 to-red-500 text-white shadow-md sticky top-0 z-50">
      <div className="max-w-6xl mx-auto px-4 md:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">

          {/* Left: Website Logo */}
          <div className="flex items-center gap-3">
            <a href="#" className="flex items-center gap-2">
              <img
                src={logoSrc || "/logo.png"}
                alt="Website Logo"
                className="h-10 w-auto object-contain drop-shadow-md"
              />
            </a>
          </div>

          {/* Middle: Categories (desktop) */}
          <nav className="hidden md:flex items-center gap-2 bg-white/10 rounded-full px-3 py-1" aria-label="Primary navigation">
            {cats.map((cat) => (
              <a
                key={cat}
                href={`#${cat}`}
                className="px-4 py-2 rounded-full text-sm font-bold text-white hover:bg-white/20 transition-colors duration-200"
              >
                {cat}
              </a>
            ))}
          </nav>

          {/* Right: Actions */}
          <div className="flex items-center gap-3">
            {/* Search */}
            <form
              onSubmit={(e) => {
                e.preventDefault()
                const query = e.target.elements.searchInput.value
                if (query) {
                  window.location.href = `/search?q=${encodeURIComponent(query)}`
                }
              }}
              className="hidden sm:flex items-center gap-2 bg-white/10 rounded-full px-2 py-1"
            >
              <Search size={16} />
              <input
                type="text"
                name="searchInput"
                placeholder="खोजें..."
                className="bg-transparent focus:outline-none text-sm text-white placeholder-white/70"
              />
            </form>

            {/* YouTube Shorts Button */}
            <a
              href="https://www.youtube.com/shorts"
              target="_blank"
              rel="noreferrer"
              className="flex items-center gap-2 bg-black hover:bg-gray-900 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-md transition duration-200"
              title="देखें YouTube Shorts"
            >
              <Play size={16} className="-ml-0.5" />
              <span className="hidden sm:inline">YouTube Shorts</span>
              <span className="sm:hidden">Shorts</span>
            </a>

            {/* Mobile menu button */}
            <button
              type="button"
              className="md:hidden p-2 rounded-md hover:bg-white/20"
              onClick={() => setOpen(!open)}
              aria-label="Toggle menu"
            >
              {open ? <X size={20} /> : <Menu size={20} />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile nav drawer */}
      {open && (
        <div className="md:hidden border-t border-white/20 bg-gradient-to-r from-red-700 via-red-600 to-red-500">
          <div className="px-4 py-3 space-y-1">
            {cats.map((cat) => (
              <a
                key={`mobile-${cat}`}
                href={`#${cat}`}
                className="block px-3 py-2 rounded-md text-base font-bold text-white hover:bg-white/20 transition duration-200"
              >
                {cat}
              </a>
            ))}

            <div className="pt-2">
              <a
                href="https://www.youtube.com/shorts"
                target="_blank"
                rel="noreferrer"
                className="flex items-center gap-2 bg-black hover:bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-semibold shadow-md"
              >
                <Play size={16} />
                <span>YouTube Shorts</span>
              </a>
            </div>
          </div>
        </div>
      )}
    </header>
  )
}

	<div class="content-area" id="primary">
		<main class="site-main" id="main">
					<header class="page-header" aria-label="Page">
			
			<h1 class="page-title">
				Uncategorized			</h1>

					</header>
		<article id="post-15" class="post-15 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized" itemtype="https://schema.org/CreativeWork" itemscope>
	<div class="inside-article">
					<header class="entry-header">
				<h2 class="entry-title" itemprop="headline"><a href="https://phonesamachar.com/%e0%a4%ae%e0%a5%8b%e0%a4%a6%e0%a5%80-%e0%a4%9c%e0%a4%bf%e0%a4%a8%e0%a4%aa%e0%a4%bf%e0%a4%82%e0%a4%97-%e0%a4%ae%e0%a5%80%e0%a4%9f%e0%a4%bf%e0%a4%82%e0%a4%97-%e0%a4%b5%e0%a5%80%e0%a4%9c%e0%a4%be/" rel="bookmark">मोदी-जिनपिंग मीटिंग: वीजा से व्यापार तक, किन-किन मुद्दों पर सहमति बनी</a></h2>		<div class="entry-meta">
			<span class="posted-on"><time class="entry-date published" datetime="2025-08-31T15:45:04+00:00" itemprop="datePublished">August 31, 2025</time></span> <span class="byline">by <span class="author vcard" itemprop="author" itemtype="https://schema.org/Person" itemscope><a class="url fn n" href="https://phonesamachar.com/author/jtcdailyvlogsgmail-com/" title="View all posts by jtcdailyvlogs@gmail.com" rel="author" itemprop="url"><span class="author-name" itemprop="name">jtcdailyvlogs@gmail.com</span></a></span></span> 		</div>
					</header>
			<div class="post-image">
						
						<a href="https://phonesamachar.com/%e0%a4%ae%e0%a5%8b%e0%a4%a6%e0%a5%80-%e0%a4%9c%e0%a4%bf%e0%a4%a8%e0%a4%aa%e0%a4%bf%e0%a4%82%e0%a4%97-%e0%a4%ae%e0%a5%80%e0%a4%9f%e0%a4%bf%e0%a4%82%e0%a4%97-%e0%a4%b5%e0%a5%80%e0%a4%9c%e0%a4%be/">
							<img fetchpriority="high" width="1200" height="675" src="https://phonesamachar.com/wp-content/uploads/2025/08/modi-jinping-shaking-hand-ptijpg_1756638641263.webp" class="attachment-full size-full wp-post-image" alt="" itemprop="image" decoding="async" srcset="https://phonesamachar.com/wp-content/uploads/2025/08/modi-jinping-shaking-hand-ptijpg_1756638641263.webp 1200w, https://phonesamachar.com/wp-content/uploads/2025/08/modi-jinping-shaking-hand-ptijpg_1756638641263-300x169.webp 300w, https://phonesamachar.com/wp-content/uploads/2025/08/modi-jinping-shaking-hand-ptijpg_1756638641263-1024x576.webp 1024w, https://phonesamachar.com/wp-content/uploads/2025/08/modi-jinping-shaking-hand-ptijpg_1756638641263-768x432.webp 768w" sizes="(max-width: 1200px) 100vw, 1200px" />
						</a>
					</div>
			<div class="entry-summary" itemprop="text">
							</div>

				<footer class="entry-meta" aria-label="Entry meta">
			<span class="cat-links"><span class="gp-icon icon-categories"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M0 112c0-26.51 21.49-48 48-48h110.014a48 48 0 0143.592 27.907l12.349 26.791A16 16 0 00228.486 128H464c26.51 0 48 21.49 48 48v224c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112z" /></svg></span><span class="screen-reader-text">Categories </span><a href="https://phonesamachar.com/category/uncategorized/" rel="category tag">Uncategorized</a></span> <span class="comments-link"><span class="gp-icon icon-comments"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M132.838 329.973a435.298 435.298 0 0016.769-9.004c13.363-7.574 26.587-16.142 37.419-25.507 7.544.597 15.27.925 23.098.925 54.905 0 105.634-15.311 143.285-41.28 23.728-16.365 43.115-37.692 54.155-62.645 54.739 22.205 91.498 63.272 91.498 110.286 0 42.186-29.558 79.498-75.09 102.828 23.46 49.216 75.09 101.709 75.09 101.709s-115.837-38.35-154.424-78.46c-9.956 1.12-20.297 1.758-30.793 1.758-88.727 0-162.927-43.071-181.007-100.61z"/><path d="M383.371 132.502c0 70.603-82.961 127.787-185.216 127.787-10.496 0-20.837-.639-30.793-1.757-38.587 40.093-154.424 78.429-154.424 78.429s51.63-52.472 75.09-101.67c-45.532-23.321-75.09-60.619-75.09-102.79C12.938 61.9 95.9 4.716 198.155 4.716 300.41 4.715 383.37 61.9 383.37 132.502z" /></svg></span><a href="https://phonesamachar.com/%e0%a4%ae%e0%a5%8b%e0%a4%a6%e0%a5%80-%e0%a4%9c%e0%a4%bf%e0%a4%a8%e0%a4%aa%e0%a4%bf%e0%a4%82%e0%a4%97-%e0%a4%ae%e0%a5%80%e0%a4%9f%e0%a4%bf%e0%a4%82%e0%a4%97-%e0%a4%b5%e0%a5%80%e0%a4%9c%e0%a4%be/#respond">Leave a comment</a></span> 		</footer>
			</div>
</article>
<article id="post-1" class="post-1 post type-post status-publish format-standard hentry category-uncategorized" itemtype="https://schema.org/CreativeWork" itemscope>
	<div class="inside-article">
					<header class="entry-header">
				<h2 class="entry-title" itemprop="headline"><a href="https://phonesamachar.com/hello-world/" rel="bookmark">Hello world!</a></h2>		<div class="entry-meta">
			<span class="posted-on"><time class="entry-date published" datetime="2025-08-22T15:23:47+00:00" itemprop="datePublished">August 22, 2025</time></span> <span class="byline">by <span class="author vcard" itemprop="author" itemtype="https://schema.org/Person" itemscope><a class="url fn n" href="https://phonesamachar.com/author/jtcdailyvlogsgmail-com/" title="View all posts by jtcdailyvlogs@gmail.com" rel="author" itemprop="url"><span class="author-name" itemprop="name">jtcdailyvlogs@gmail.com</span></a></span></span> 		</div>
					</header>
			
			<div class="entry-summary" itemprop="text">
				<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
			</div>

				<footer class="entry-meta" aria-label="Entry meta">
			<span class="cat-links"><span class="gp-icon icon-categories"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M0 112c0-26.51 21.49-48 48-48h110.014a48 48 0 0143.592 27.907l12.349 26.791A16 16 0 00228.486 128H464c26.51 0 48 21.49 48 48v224c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112z" /></svg></span><span class="screen-reader-text">Categories </span><a href="https://phonesamachar.com/category/uncategorized/" rel="category tag">Uncategorized</a></span> <span class="comments-link"><span class="gp-icon icon-comments"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M132.838 329.973a435.298 435.298 0 0016.769-9.004c13.363-7.574 26.587-16.142 37.419-25.507 7.544.597 15.27.925 23.098.925 54.905 0 105.634-15.311 143.285-41.28 23.728-16.365 43.115-37.692 54.155-62.645 54.739 22.205 91.498 63.272 91.498 110.286 0 42.186-29.558 79.498-75.09 102.828 23.46 49.216 75.09 101.709 75.09 101.709s-115.837-38.35-154.424-78.46c-9.956 1.12-20.297 1.758-30.793 1.758-88.727 0-162.927-43.071-181.007-100.61z"/><path d="M383.371 132.502c0 70.603-82.961 127.787-185.216 127.787-10.496 0-20.837-.639-30.793-1.757-38.587 40.093-154.424 78.429-154.424 78.429s51.63-52.472 75.09-101.67c-45.532-23.321-75.09-60.619-75.09-102.79C12.938 61.9 95.9 4.716 198.155 4.716 300.41 4.715 383.37 61.9 383.37 132.502z" /></svg></span><a href="https://phonesamachar.com/hello-world/#respond">Leave a comment</a></span> 		</footer>
			</div>
</article>
		</main>
	</div>

	<div class="widget-area sidebar is-right-sidebar" id="right-sidebar">
	<div class="inside-right-sidebar">
		<aside id="block-2" class="widget inner-padding widget_block widget_search"><form role="search" method="get" action="https://phonesamachar.com/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search"    ><label class="wp-block-search__label" for="wp-block-search__input-1" >Search</label><div class="wp-block-search__inside-wrapper " ><input class="wp-block-search__input" id="wp-block-search__input-1" placeholder="" value="" type="search" name="s" required /><button aria-label="Search" class="wp-block-search__button wp-element-button" type="submit" >Search</button></div></form></aside><aside id="block-3" class="widget inner-padding widget_block"><div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">Recent Posts</h2><ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://phonesamachar.com/%e0%a4%ae%e0%a5%8b%e0%a4%a6%e0%a5%80-%e0%a4%9c%e0%a4%bf%e0%a4%a8%e0%a4%aa%e0%a4%bf%e0%a4%82%e0%a4%97-%e0%a4%ae%e0%a5%80%e0%a4%9f%e0%a4%bf%e0%a4%82%e0%a4%97-%e0%a4%b5%e0%a5%80%e0%a4%9c%e0%a4%be/">मोदी-जिनपिंग मीटिंग: वीजा से व्यापार तक, किन-किन मुद्दों पर सहमति बनी</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://phonesamachar.com/hello-world/">Hello world!</a></li>
</ul></div></div></aside><aside id="block-4" class="widget inner-padding widget_block"><div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">Recent Comments</h2><div class="no-comments wp-block-latest-comments">No comments to show.</div></div></div></aside>	</div>
</div>

	</div>
</div>


<div class="site-footer">
			<footer class="site-info" aria-label="Site"  itemtype="https://schema.org/WPFooter" itemscope>
			<div class="inside-site-info grid-container">
								<div class="copyright-bar">
					<span class="copyright">&copy; 2025 phonesamachar.com</span> &bull; Built with <a href="https://generatepress.com" itemprop="url">GeneratePress</a>				</div>
			</div>
		</footer>
		</div>

<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/generatepress\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script id="generate-a11y">
!function(){"use strict";if("querySelector"in document&&"addEventListener"in window){var e=document.body;e.addEventListener("pointerdown",(function(){e.classList.add("using-mouse")}),{passive:!0}),e.addEventListener("keydown",(function(){e.classList.remove("using-mouse")}),{passive:!0})}}();
</script>
			<script>
				const lazyloadRunObserver = () => {
					const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` );
					const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
						entries.forEach( ( entry ) => {
							if ( entry.isIntersecting ) {
								let lazyloadBackground = entry.target;
								if( lazyloadBackground ) {
									lazyloadBackground.classList.add( 'e-lazyloaded' );
								}
								lazyloadBackgroundObserver.unobserve( entry.target );
							}
						});
					}, { rootMargin: '200px 0px 200px 0px' } );
					lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
						lazyloadBackgroundObserver.observe( lazyloadBackground );
					} );
				};
				const events = [
					'DOMContentLoaded',
					'elementor/lazyload/observe',
				];
				events.forEach( ( event ) => {
					document.addEventListener( event, lazyloadRunObserver );
				} );
			</script>
			

</body>
</html>