// Hero.jsx — V11. Added /911/ nav link alongside Tips and Food Crawls.
// V10: added Tips → /tip/, Food Crawls → /food-crawls/.
// Mobile ≤640px: nav link text hides, icons only. Same collapse pattern as .ig-magnet.
function Hero() {
  const [scrolled, setScrolled] = React.useState(false);
  const [deepScrolled, setDeepScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 20);
      setDeepScrolled(window.scrollY > window.innerHeight * 0.4);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const [followers, setFollowers] = React.useState(11847);
  React.useEffect(() => {
    const t = setInterval(() => setFollowers(f => f + (Math.random() > .7 ? 1 : 0)), 2200);
    return () => clearInterval(t);
  }, []);

  return (
    <>
      <header
        style={{
          position:'sticky', top:0, zIndex:60,
          display:'flex',
          justifyContent:'space-between',
          alignItems:'center',
          padding:'14px 24px',
          backdropFilter: scrolled ? 'blur(24px)' : 'blur(12px)',
          WebkitBackdropFilter: scrolled ? 'blur(24px)' : 'blur(12px)',
          background: scrolled
            ? 'linear-gradient(180deg, rgba(255,193,7,.94), rgba(255,193,7,.82))'
            : 'linear-gradient(180deg, rgba(255,193,7,.70), rgba(255,193,7,.35))',
          borderBottom: scrolled ? '1px solid rgba(0,0,0,.14)' : '1px solid transparent',
          transition:'all 300ms var(--ease-grub)'
        }}
      >
        <a href="#hero" className="flex items-center gap-3" style={{textDecoration:'none'}}>
          <span style={{
            display:'grid',placeItems:'center',
            height:64,width:64,borderRadius:9999,overflow:'hidden',
            border:'2px solid var(--grub-ketchup)',
            boxShadow:'0 0 24px -4px rgba(211,47,47,.55)',
            background:'#0D0D0D',
            flex:'none'
          }}>
            <img src="../assets/hot dog jasons grub43753142.jpg" alt="Jason's Grub" style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}}
              onError={(e)=>{ e.currentTarget.replaceWith(Object.assign(document.createElement('span'),{textContent:'🌭',style:'font-size:40px;line-height:1'})); }}
            />
          </span>
        </a>

        <nav style={{display:'flex',alignItems:'center',gap:8}}>
          <a href="/tip/" className="nav-link">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{height:18,width:18,flex:'none'}}>
              <polyline points="4 2 4 22 6.5 20 9 22 11.5 20 14 22 16.5 20 19 22 19 2"/>
              <line x1="8" y1="9" x2="15" y2="9"/>
              <line x1="8" y1="13" x2="15" y2="13"/>
            </svg>
            <span className="nav-link-text">Tips</span>
          </a>
          <a href="/food-crawls/" className="nav-link">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{height:18,width:18,flex:'none'}}>
              <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" strokeLinejoin="round"/>
              <circle cx="12" cy="9" r="2.5"/>
            </svg>
            <span className="nav-link-text">Food Crawls</span>
          </a>
          <a href="/911/" className="nav-link">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{height:18,width:18,flex:'none'}}>
              <path d="M3 12l2-7h14l2 7v7a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2H7v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z" strokeLinejoin="round"/>
              <circle cx="8" cy="14.5" r="1.2" fill="currentColor"/>
              <circle cx="16" cy="14.5" r="1.2" fill="currentColor"/>
            </svg>
            <span className="nav-link-text">911</span>
          </a>
        </nav>

        <a href="https://www.instagram.com/jasonsgrub/" target="_blank" rel="noopener" className="ig-magnet">
          <span className="ig-magnet-inner">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{height:18,width:18}}>
              <rect x="3" y="3" width="18" height="18" rx="5"/>
              <circle cx="12" cy="12" r="4"/>
              <circle cx="17.5" cy="6.5" r="1" fill="currentColor"/>
            </svg>
            <span className="ig-magnet-text">Follow @jasonsgrub</span>
          </span>
        </a>
      </header>

      <a href="https://www.instagram.com/jasonsgrub/" target="_blank" rel="noopener"
        className="ig-float"
        style={{
          opacity: deepScrolled ? 1 : 0,
          pointerEvents: deepScrolled ? 'auto' : 'none',
          transform: deepScrolled ? 'translateY(0)' : 'translateY(20px)',
        }}
        aria-label="Follow @jasonsgrub on Instagram"
      >
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" style={{height:24,width:24}}>
          <rect x="3" y="3" width="18" height="18" rx="5"/>
          <circle cx="12" cy="12" r="4"/>
          <circle cx="17.5" cy="6.5" r="1" fill="currentColor"/>
        </svg>
      </a>

      <section id="hero" style={{position:'relative',minHeight:'calc(100vh - 72px)',overflow:'hidden',display:'flex',flexDirection:'column',marginTop:-72,paddingTop:72}}>
        {/* Soft mustard glow background */}
        <div aria-hidden style={{position:'absolute',inset:0,zIndex:0,background:'radial-gradient(ellipse at 50% 85%, rgba(211,47,47,.25) 0%, rgba(255,193,7,0) 55%)'}} />

        <div className="container hero-center" style={{position:'relative',zIndex:10,flex:1,paddingTop:24,paddingBottom:40}}>
          <p className="eyebrow hero-eyebrow reveal in">
            <span className="hero-eyebrow-rule" />
            <span>Verified · Hot dog obsessed</span>
            <svg viewBox="0 0 24 24" style={{height:14,width:14,color:'#0D0D0D'}} fill="currentColor" aria-label="Verified">
              <path d="M12 1 9.5 3.5 6 3l-1 3.5L2 8.5l1.5 3L2 15l3 1.5L6 20l3.5-.5L12 22l2.5-2.5L18 20l1-3.5 3-2L20.5 11 22 8.5l-3-2L18 3l-3.5.5L12 1Zm-1.2 14.6L7 11.7l1.6-1.6 2.2 2.2 4.6-4.6L17 9.3l-6.2 6.3Z"/>
            </svg>
          </p>

          {/* ====== The video-backed headline block ====== */}
          <div className="hero-video-block reveal in">
            <video
              className="hero-video-bg"
              autoPlay muted loop playsInline preload="auto"
              poster="../assets/hot dog jasons grub43753142.jpg"
              onError={(e)=>{ e.currentTarget.style.display='none'; }}
            >
              <source src="../assets/Glizzysonthegrill.mp4" type="video/mp4" />
            </video>
            <div className="hero-video-overlay" aria-hidden />
            <div className="hero-video-inner">
              <h1 className="display hero-headline">
                <span style={{display:'block'}}>Follow the</span>
                <span style={{display:'block'}}>world's best</span>
                <span style={{display:'block'}}>hot dog feed</span>
                <span style={{display:'block'}}>on <span style={{color:'#FFC107'}}>Instagram</span>.</span>
              </h1>
              <p className="hero-sub">
                Daily charcoal snaps, regional deep-dives, and the occasional condiment crime. Ten years. Fifty states. Zero ketchup.
              </p>
            </div>
          </div>

          <div className="follower-proof reveal in">
            <div className="follower-dots" aria-hidden>
              <span /><span /><span /><span />
              <span className="follower-live flame-pulse" />
            </div>
            <p className="follower-copy">
              Join <span className="follower-num">{followers.toLocaleString()}</span> hot dog enthusiasts
              <span className="follower-sub"> · @jasonsgrub</span>
            </p>
          </div>

          <div className="flex flex-wrap items-center gap-4 reveal in hero-cta-row">
            <a href="https://www.instagram.com/jasonsgrub/" target="_blank" rel="noopener" className="ig-cta">
              <span className="ig-cta-inner">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" style={{height:26,width:26}}>
                  <rect x="3" y="3" width="18" height="18" rx="5"/>
                  <circle cx="12" cy="12" r="4"/>
                  <circle cx="17.5" cy="6.5" r="1" fill="currentColor"/>
                </svg>
                Follow on Instagram
                <svg viewBox="0 0 24 24" style={{height:22,width:22}} fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M5 12h14M13 5l7 7-7 7" />
                </svg>
              </span>
            </a>
            <a href="#feed" className="btn-see-feed">SEE THE FEED ↓</a>
          </div>

          <dl className="hero-stats reveal in">
            <div><dt>Dogs Reviewed</dt><dd className="display">500+</dd></div>
            <div><dt>States Toured</dt><dd className="display">15</dd></div>
            <div><dt>Grilling Hours</dt><dd className="display" style={{color:'var(--grub-ketchup)'}}>1,000+</dd></div>
          </dl>
        </div>
      </section>

      <a href="https://www.instagram.com/jasonsgrub/" target="_blank" rel="noopener" className="ig-bottom-bar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" style={{height:22,width:22}}>
          <rect x="3" y="3" width="18" height="18" rx="5"/>
          <circle cx="12" cy="12" r="4"/>
          <circle cx="17.5" cy="6.5" r="1" fill="currentColor"/>
        </svg>
        <span>Follow @jasonsgrub</span>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{height:18,width:18,marginLeft:'auto'}}>
          <path d="M5 12h14M13 5l7 7-7 7" />
        </svg>
      </a>

      <style>{`
        .hero-center{
          display:flex; flex-direction:column; align-items:flex-start; gap:0;
          max-width: 980px;
        }
        @media (min-width: 720px){
          .hero-center{ align-items:center; text-align:center; margin: 0 auto; }
        }

        .hero-eyebrow{
          display:inline-flex; align-items:center; gap:12px; margin-bottom: 20px;
          color:#0D0D0D;
        }
        .hero-eyebrow-rule{ display:inline-block; height:2px; width:28px; background: #0D0D0D; }

        /* Video-backed headline block */
        .hero-video-block{
          position:relative; width:100%; max-width:980px;
          border-radius:24px; overflow:hidden;
          box-shadow: 0 30px 80px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.15);
          isolation:isolate;
        }
        .hero-video-bg{
          position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
        }
        .hero-video-overlay{
          position:absolute; inset:0; z-index:1;
          background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.72) 100%);
        }
        .hero-video-inner{
          position:relative; z-index:2;
          padding: clamp(32px, 6vw, 72px) clamp(24px, 5vw, 56px);
          display:flex; flex-direction:column; align-items:flex-start; text-align:left;
          min-height: 460px; justify-content:center;
        }
        @media (min-width: 720px){
          .hero-video-inner{ align-items:center; text-align:center; }
        }
        .hero-headline{
          font-size: clamp(2.75rem, 10vw, 7.5rem);
          line-height: .85;
          color: #FFFFFF;
          margin:0;
          text-shadow: 0 4px 20px rgba(0,0,0,.6);
        }
        .hero-sub{
          margin-top: 28px; max-width: 640px;
          font-size: clamp(1rem, 2vw, 1.2rem);
          color: rgba(255,255,255,.95); line-height: 1.55;
          text-shadow: 0 2px 12px rgba(0,0,0,.55);
        }

        .hero-cta-row{ margin-top: 24px; }
        @media (min-width: 720px){ .hero-cta-row{ justify-content:center; } }

        .hero-stats{
          display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
          margin: 32px 0 0; padding-top: 20px; max-width: 640px; width: 100%;
          border-top: 1px solid rgba(0,0,0,.18);
          font-family: var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.18em;
          color: rgba(0,0,0,.72);
        }
        .hero-stats dt{ font-size: inherit }
        .hero-stats dd{ margin: 4px 0 0; font-size: clamp(1.5rem, 4vw, 2rem); line-height:1; color:#0D0D0D }

        .follower-proof{
          display:flex; align-items:center; gap:14px; margin-top:24px;
          padding: 12px 16px; max-width: 560px; width: 100%;
          background: #0D0D0D;
          border: 1px solid rgba(0,0,0,.2); border-radius: 12px;
          text-align:left;
        }
        @media (min-width: 720px){ .follower-proof{ margin-left:auto; margin-right:auto; } }
        .follower-dots{ display:flex; align-items:center; flex:none }
        .follower-dots > span{
          display:inline-block; height:26px; width:26px; border-radius:9999px;
          border: 2px solid #0D0D0D;
          margin-left: -8px;
        }
        .follower-dots > span:nth-child(1){ background: var(--grub-ketchup); margin-left:0 }
        .follower-dots > span:nth-child(2){ background: #FFC107; }
        .follower-dots > span:nth-child(3){ background: var(--grub-relish); }
        .follower-dots > span:nth-child(4){ background: #FFFFFF; }
        .follower-dots > span.follower-live{
          background: var(--grub-ketchup);
          animation: ketchupPulse 2s ease-in-out infinite;
        }
        @keyframes ketchupPulse{
          0%,100%{ box-shadow: 0 0 0 0 rgba(211,47,47,.55) }
          50%    { box-shadow: 0 0 0 8px rgba(211,47,47,0) }
        }
        .follower-copy{
          font-family: var(--font-body); font-size: .95rem; color: #FFFFFF; margin:0;
        }
        .follower-num{
          font-family: var(--font-display); font-weight:900; color: #FFC107;
          font-size: 1.15rem; letter-spacing: .01em;
        }
        .follower-sub{
          font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.2em;
          color: rgba(255,255,255,.6); margin-left:4px;
        }

        /* Nav links — between logo and IG button */
        .nav-link{
          display:inline-flex; align-items:center; gap:8px;
          padding:10px 16px; border-radius:9999px;
          background: var(--grub-ketchup);
          border: 1px solid transparent;
          color: #fff; text-decoration:none;
          font-family: var(--font-display); font-weight:800;
          font-size:.88rem; text-transform:uppercase; letter-spacing:.06em;
          transition: background 200ms var(--ease-grub);
        }
        .nav-link:hover{ background: var(--grub-ketchup-dark); }
        @media (max-width:640px){
          .nav-link-text{ display:none }
          .nav-link{ padding:10px 12px; gap:0 }
        }

        .ig-magnet{
          position:relative;display:inline-block;padding:2px;border-radius:9999px;
          background: #0D0D0D;
          text-decoration:none;
        }
        .ig-magnet-inner{
          display:inline-flex;align-items:center;gap:10px;
          padding:10px 20px;border-radius:9999px;
          background: var(--grub-ketchup); color: #fff;
          font-family: var(--font-display); font-weight:800; font-size:.95rem;
          text-transform:uppercase; letter-spacing:.06em;
          transition: transform 200ms var(--ease-grub);
        }
        .ig-magnet:hover .ig-magnet-inner{ transform: scale(1.04) }
        @media (max-width:640px){
          .ig-magnet-text{display:none}
          .ig-magnet-inner{padding:10px 12px}
        }

        .ig-cta{
          position:relative;display:inline-block;padding:3px;border-radius:9999px;
          background: #0D0D0D;
          box-shadow: 0 0 50px -10px rgba(0,0,0,.5);
          text-decoration:none;
        }
        .ig-cta-inner{
          display:inline-flex;align-items:center;gap:14px;
          padding:16px 26px;border-radius:9999px;
          background: var(--grub-ketchup); color: #fff;
          font-family: var(--font-display); font-weight:800; font-size:clamp(1.1rem, 2.5vw, 1.35rem);
          text-transform:uppercase; letter-spacing:.04em;
          transition: transform 200ms var(--ease-grub);
        }
        .ig-cta:hover .ig-cta-inner{ transform: scale(1.04) }

        .ig-float{
          position: fixed; right: 20px; bottom: 20px; z-index: 70;
          display: grid; place-items:center;
          height: 56px; width: 56px; border-radius: 9999px;
          background: #0D0D0D; color: #FFC107; text-decoration:none;
          box-shadow: 0 12px 30px -8px rgba(0,0,0,.6);
          transition: opacity 400ms var(--ease-grub), transform 400ms var(--ease-grub);
        }
        @media (max-width: 720px){ .ig-float{ display:none } }

        .ig-bottom-bar{
          display:none;
          position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70;
          align-items:center; gap:12px;
          padding: 14px 18px; border-radius: 14px;
          background: #0D0D0D; color: #FFC107; text-decoration:none;
          font-family: var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.05em;
          font-size: 1rem;
          box-shadow: 0 12px 30px -8px rgba(0,0,0,.6);
        }
        @media (max-width: 720px){
          .ig-bottom-bar{ display:flex }
          body{ padding-bottom: 80px }
        }

        .btn-ghost{ border-color: rgba(0,0,0,.4) !important; color: #0D0D0D !important; }
        .btn-ghost:hover{ border-color: var(--grub-ketchup) !important; color: var(--grub-ketchup) !important; }

        /* White-filled secondary CTA — bold black font */
        .btn-see-feed{
          display:inline-flex; align-items:center; gap:10px;
          padding: 16px 28px; border-radius: 9999px;
          background: #ffffff; color: #0D0D0D; text-decoration:none;
          font-family: var(--font-display); font-weight: 900;
          font-size: clamp(1.05rem, 2.2vw, 1.25rem);
          letter-spacing: .04em; text-transform: uppercase;
          border: 2px solid #0D0D0D;
          box-shadow: 0 4px 0 0 #0D0D0D;
          transition: transform 150ms var(--ease-grub), box-shadow 150ms var(--ease-grub);
        }
        .btn-see-feed:hover{
          transform: translateY(-2px);
          box-shadow: 0 6px 0 0 #0D0D0D;
        }
        .btn-see-feed:active{
          transform: translateY(2px);
          box-shadow: 0 1px 0 0 #0D0D0D;
        }
      `}</style>
    </>
  );
}

window.Hero = Hero;
