// ─── Nav + Hero v2 ────────────────────────────────────────

function Nav({ onDemoClick }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', h);
    return () => window.removeEventListener('scroll', h);
  }, []);

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: scrolled ? 'rgba(247,245,240,0.88)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px) saturate(1.2)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'all 0.25s ease',
    }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 68 }}>
        {/* Logo */}
        <a href="index.html" style={{ textDecoration: 'none', flexShrink: 1, minWidth: 0 }} className="nav-logo-link">
          <div style={{ padding: 12, position: 'relative', zIndex: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ position: 'relative' }}>
                <div style={{
                  position: 'absolute', inset: 0,
                  background: '#3b82f6', filter: 'blur(8px)',
                  opacity: 0.2, borderRadius: '50%',
                }} />
                <img src="assets/Dashboard_Logo_192.png" alt="EduGuard Logo" style={{
                  position: 'relative',
                  height: 48, width: 48,
                  borderRadius: 12,
                  objectFit: 'cover',
                  boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
                  background: 'white',
                  border: '1px solid #f1f5f9',
                }} />
              </div>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 18, letterSpacing: '-0.01em', lineHeight: 1.25, color: '#1a5d97' }}>
                  <span style={{ fontWeight: 500, color: '#1e40af' }}>EduGuard</span>
                </span>
                <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.15em', textTransform: 'uppercase', color: '#1e40af' }}>
                  Secure every step
                </span>
              </div>
            </div>
          </div>
        </a>

        {/* Links */}
        <div style={{ display: 'flex', gap: 30, alignItems: 'center' }} className="nav-links">
          {[['Platform', '#platform'], ['For Principals', '#for-principals'], ['For Parents', '#for-parents']].map(([label, href]) => (
            <a key={label} href={href} style={{
              color: 'var(--ink-1)', textDecoration: 'none', fontSize: 14, fontWeight: 500,
            }}>{label}</a>
          ))}
        </div>

        <div style={{ display: 'flex', gap: 10, flexShrink: 0 }}>
          <button onClick={onDemoClick} className="btn btn-primary nav-btn-demo" style={{ padding: '10px 18px', fontSize: 13, whiteSpace: 'nowrap' }}>
            Book a demo
          </button>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .nav-links { display: none !important; } }
        @media (max-width: 600px) {
          .nav-btn-demo { padding: 8px 12px !important; font-size: 12px !important; }
        }
        .nav-logo-link { transition: transform 0.3s ease; }
        .nav-logo-link:hover { transform: translateY(-2px); }
      `}</style>
    </nav>
  );
}

function LiveSafetyFeed() {
  const notifications = [
    { type: 'safe', icon: '✓', label: 'Bus Boarding', text: 'Aarav M. boarded Bus #7A', time: 'Just now', color: '#1f6f52', bg: 'rgba(31,111,82,0.06)' },
    { type: 'safe', icon: '✓', label: 'Campus Entry', text: 'Priya S. entered school gate', time: '07:55 AM', color: '#1f6f52', bg: 'rgba(31,111,82,0.06)' },
    { type: 'alert', icon: '!', label: 'Zone Alert', text: 'Unauthorized entry — Server Room', time: '08:12 AM', color: 'var(--crimson)', bg: 'rgba(184,49,74,0.05)' },
    { type: 'info', icon: '◉', label: 'Attendance', text: 'Class 9-B — 100% present', time: '08:30 AM', color: 'var(--saffron)', bg: 'rgba(26,92,151,0.05)' },
    { type: 'safe', icon: '✓', label: 'Parent Notified', text: 'Rohan K. reached campus safely', time: '07:48 AM', color: '#1f6f52', bg: 'rgba(31,111,82,0.06)' },
  ];

  const [visible, setVisible] = useState([0, 1, 2]);

  useEffect(() => {
    const id = setInterval(() => {
      setVisible(prev => prev.map(i => (i + 1) % notifications.length));
    }, 3000);
    return () => clearInterval(id);
  }, []);

  return (
    <div style={{
      width: '100%', maxWidth: 400,
      display: 'flex', flexDirection: 'column', gap: 14,
      animation: 'fade-up 0.8s 0.3s backwards',
    }}>
      {/* Header chip */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '10px 18px',
        background: 'rgba(255,255,255,0.75)',
        backdropFilter: 'blur(12px)',
        borderRadius: 100,
        border: '1px solid rgba(255,255,255,0.5)',
        boxShadow: '0 4px 20px rgba(13,21,48,0.08)',
        alignSelf: 'flex-start',
      }}>
        <span style={{
          width: 8, height: 8, background: '#22c55e', borderRadius: '50%',
          animation: 'tick-pulse 1.5s infinite',
          boxShadow: '0 0 6px rgba(34,197,94,0.4)',
        }} />
        <span className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', color: 'var(--ink-1)', fontWeight: 600, textTransform: 'uppercase' }}>
          Live Safety Feed
        </span>
      </div>

      {/* Notification cards */}
      {visible.map((ni, i) => {
        const n = notifications[ni];
        return (
          <div key={`${ni}-${i}`} style={{
            display: 'flex', alignItems: 'flex-start', gap: 14,
            padding: '18px 22px',
            background: 'rgba(255,255,255,0.8)',
            backdropFilter: 'blur(16px) saturate(1.3)',
            borderRadius: 20,
            border: '1px solid rgba(255,255,255,0.5)',
            boxShadow: '0 8px 32px rgba(13,21,48,0.08)',
            animation: `fade-up 0.5s ${i * 0.12}s backwards`,
            transition: 'all 0.4s ease',
          }}>
            {/* Icon badge */}
            <div style={{
              width: 38, height: 38, minWidth: 38, borderRadius: 12,
              background: n.bg,
              border: `1px solid ${n.type === 'alert' ? 'rgba(184,49,74,0.15)' : 'var(--line)'}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 14, fontWeight: 700, color: n.color,
            }}>
              {n.icon}
            </div>

            {/* Content */}
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                <span className="mono" style={{
                  fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase',
                  color: n.color, fontWeight: 700,
                }}>{n.label}</span>
                <span style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 500 }}>{n.time}</span>
              </div>
              <div style={{ fontSize: 14, color: 'var(--ink-0)', fontWeight: 600, lineHeight: 1.4 }}>
                {n.text}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function Hero({ onDemoClick, headline }) {
  const videoRef = React.useRef(null);

  // Re-play video if interrupted by browser policy temporarily
  React.useEffect(() => {
    if (videoRef.current) {
        videoRef.current.play().catch(e => console.warn('Video auto-play prevented:', e));
    }
  }, []);

  return (
    <section className="hero-section" style={{ position: 'relative', minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingTop: 80 }}>
      
      {/* 1. Underlying Atmospheric Video */}
      <div style={{ position: 'absolute', inset: 0, zIndex: -2 }}>
        <video 
          className="hero-video"
          ref={videoRef}
          autoPlay 
          muted 
          loop 
          playsInline 
          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
        >
          <source src="assets/banner.mp4" type="video/mp4" />
        </video>
      </div>

      {/* 2. Frosted Glass Light Theme Mask */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: -1,
        background: 'linear-gradient(135deg, rgba(20, 45, 80, 0.15) 0%, rgba(247, 245, 240, 0.4) 100%)', 
        backdropFilter: 'blur(5px) saturate(1.1)'
      }}></div>

      {/* Subtle dot grid background over the glass for texture */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: -1,
        backgroundImage: 'radial-gradient(rgba(13,21,48,0.1) 1px, transparent 1px)',
        backgroundSize: '32px 32px',
        maskImage: 'radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 75%)',
        opacity: 0.6
      }} />

      <div className="wrap" style={{ position: 'relative', zIndex: 10 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 0.9fr)',
          gap: 60,
          alignItems: 'center',
        }} className="hero-grid">

          {/* Left — copy */}
          <div className="fade-up" style={{ animationDelay: '0.1s' }}>

            <h1 className="display-hero" style={{
              fontSize: 'clamp(38px, 9vw, 78px)',
              marginTop: 0, marginBottom: 22,
              maxWidth: 720,
            }}>
              The quiet intelligence behind a <em className="display-italic" style={{ color: 'var(--brand)' }}>safer, smarter school.</em>
            </h1>

            <p style={{
              fontSize: 18, lineHeight: 1.55,
              color: 'var(--ink-1)',
              maxWidth: 540,
              marginBottom: 36,
            }}>
              EduGuard connects every room, bus, parent, and classroom into one intelligent network — so your campus runs itself, your teachers teach more, and every parent sleeps a little easier.
            </p>

            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 40 }}>
              <button onClick={onDemoClick} className="btn btn-primary" style={{ padding: '16px 26px', fontSize: 15 }}>
                Book a demo
                <Icon.Arrow style={{ width: 16, height: 16 }} />
              </button>
              <a href="#platform" className="btn btn-ghost" style={{ padding: '16px 22px', fontSize: 15, background: 'rgba(255,255,255,0.7)', backdropFilter: 'blur(4px)' }}>
                See the platform
              </a>
            </div>

            {/* Trust row */}
            <div className="trust-row" style={{ display: 'flex', gap: 16, flexWrap: 'nowrap', alignItems: 'center', background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', padding: '16px 20px', borderRadius: 16, border: '1px solid rgba(255,255,255,0.6)', overflowX: 'auto', scrollbarWidth: 'none', WebkitOverflowScrolling: 'touch' }}>
              {[
                ['Zero', 'capex'],
                ['CBSE / ICSE', 'ready'],
                ['Real-time', 'tracking'],
                ['Made in', 'India'],
              ].map(([a, b]) => (
                <div key={a + b} style={{ display: 'flex', alignItems: 'baseline', gap: 6, flexShrink: 0 }}>
                  <span className="display" style={{ fontSize: 20, color: 'var(--brand)' }}>{a}</span>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--ink-2)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{b}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Right — Hero 3D Network */}
          <div style={{ display: 'flex', justifyContent: 'center' }} className="fade-up hero-3d">
            <HeroNetwork />
          </div>
        </div>

        {/* Top features strip */}
        <div className="ticker-strip" style={{ marginTop: 80, paddingTop: 28, borderTop: '1px solid rgba(13,21,48,0.1)' }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 28,
          }} className="stats-grid">
            {[
              { iconKey: 'Pin', title: 'Live campus tracking', desc: 'Every child located to the room, in real time.' },
              { iconKey: 'Bus', title: 'Live bus tracking', desc: 'Parents see the bus, the route, the boarding moment.' },
              { iconKey: 'Grade', title: 'AI bulk grading', desc: 'Answer sheets to marks & weak topics in minutes.' },
              { iconKey: 'Brain', title: 'Eva, your AI co-pilot', desc: 'Ask anything in plain English. She has the data.' },
            ].map((f, i) => {
              const IconComp = Icon[f.iconKey];
              return (
                <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: 10,
                    background: 'rgba(26,92,151,0.08)',
                    border: '1px solid rgba(26,92,151,0.18)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                    color: 'var(--brand)',
                  }}>
                    <IconComp style={{ width: 20, height: 20 }} />
                  </div>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--ink-0)', letterSpacing: '-0.008em', marginBottom: 3, lineHeight: 1.3 }}>
                      {f.title}
                    </div>
                    <div style={{ color: 'var(--ink-2)', fontSize: 12.5, lineHeight: 1.45 }}>
                      {f.desc}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
          .hero-section { padding-top: 110px !important; padding-bottom: 40px !important; justify-content: flex-start !important; }
          .hero-video { opacity: 0.3 !important; }
        }
        @media (min-width: 981px) {
          .hero-video { opacity: 0.85; }
        }
        @media (min-width: 601px) {
          .trust-row { flex-wrap: nowrap !important; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
          .trust-row::-webkit-scrollbar { display: none; }
        }
        @media (max-width: 600px) {
          .hero-section { padding-top: 90px !important; }
          .trust-row { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; border: none !important; background: transparent !important; padding: 4px 8px !important; overflow: visible !important; }
          .hero-video { opacity: 0.6 !important; mix-blend-mode: multiply !important; filter: contrast(1.2) !important; }
          .hero-3d { display: none !important; }
          .ticker-strip { margin-top: 32px !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Nav, Hero });