/* TopAndHero.jsx — Sections 0–2: Sticky Nav, Hero + Lead Form, Trust Strip */
/* FULLY RESPONSIVE VERSION */

/* ── Section 0: Sticky Top Utility Bar ───────────────────────── */
const StickyNav = () => {
  const { isMobile } = useResponsive();
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 10);
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
      height: isMobile ? 56 : 64,
      background: '#fff',
      borderBottom: scrolled ? 'none' : '1px solid #eee',
      boxShadow: scrolled ? '0 2px 12px rgba(0,0,0,0.08)' : 'none',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: isMobile ? '0 16px' : '0 40px',
      fontFamily: "'IBM Plex Sans', sans-serif",
      transition: 'box-shadow 0.3s ease',
    }}>
      {/* Logo */}
<a
  href="/"
  style={{
    display: 'flex',
    alignItems: 'center',
    textDecoration: 'none',
  }}
>
  <img
    src="/GGU-Logo.png"
    alt="GGU Logo"
    style={{
      height: isMobile ? 34 : 42,
      width: 'auto',
      objectFit: 'contain',
      display: 'block',
    }}
  />
</a>

      {/* Centre pill — desktop only */}
      {!isMobile && (
        <div style={{
          padding: '6px 18px', borderRadius: 20,
          border: '1.5px solid #1E1E78', color: '#1E1E78',
          fontSize: 11, fontWeight: 600, letterSpacing: '0.04em',
        }}>
          1st Time in A.P. & Telangana
        </div>
      )}

      {/* Right actions */}
      <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 10 : 16 }}>
        {!isMobile && (
          <a href="tel:+918977780866" style={{
            display: 'flex', alignItems: 'center', gap: 6, textDecoration: 'none',
            color: '#1A1A1A', fontSize: 13, fontWeight: 600,
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1E1E78" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            +91 89777 80866
          </a>
        )}
        {isMobile && (
          <a href="tel:+918977780866" style={{
            width: 36, height: 36, borderRadius: 8, background: '#F0F0F0',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            textDecoration: 'none',
          }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1E1E78" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
          </a>
        )}
        <a href="https://wa.me/918977780866?text=Hi%2C%20I%27d%20like%20to%20know%20about%20the%20B.Tech%20Cyber%20Security%20program%20at%20GGU." target="_blank" rel="noopener" style={{
          width: isMobile ? 36 : 32, height: isMobile ? 36 : 32, borderRadius: 8, background: '#25D366',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.127.556 4.126 1.527 5.86L.058 23.708l5.97-1.565A11.94 11.94 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-1.903 0-3.727-.522-5.313-1.51l-.381-.227-3.546.93.948-3.462-.249-.396A9.77 9.77 0 0 1 2.182 12 9.818 9.818 0 1 1 12 21.818z"/></svg>
        </a>
        <a href="#apply" style={{
          padding: isMobile ? '9px 16px' : '10px 22px', borderRadius: 8, textDecoration: 'none',
          background: 'linear-gradient(90deg, #E0231C, #7A1F7C)',
          color: '#fff', fontSize: isMobile ? 12 : 13, fontWeight: 700,
          fontFamily: "'IBM Plex Sans', sans-serif",
        }}>Apply Now</a>
      </div>
    </nav>
  );
};

/* ── Section 1: Hero + Lead Form ─────────────────────────────── */
const HeroSection = () => {
  const { isMobile, isTablet } = useResponsive();
  const [formData, setFormData] = React.useState({
    name: '', mobile: '', email: '', city: '', year: '',
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('Form submitted! (Demo — would POST to /api/lead)');
  };

  const inputStyle = {
    width: '100%', padding: isMobile ? '13px 14px' : '12px 14px', borderRadius: 8,
    border: '1.5px solid #ddd', fontSize: 14, fontFamily: "'IBM Plex Sans', sans-serif",
    outline: 'none', transition: '0.2s ease', background: '#fff',
  };

  return (
    <section id="hero" style={{
      background: 'linear-gradient(150deg, #1E1E78 0%, #7A1F7C 45%, #E0231C 100%)',
      padding: isMobile ? '80px 20px 40px' : '120px 40px 72px',
      position: 'relative', overflow: 'hidden',
      minHeight: isMobile ? 'auto' : '85vh',
      display: 'flex', alignItems: 'center',
    }}>
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, height: '60%',
        background: 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.06) 100%)',
        pointerEvents: 'none',
      }}></div>

      <div style={{
        maxWidth: 1200, margin: '0 auto', width: '100%',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1fr 1fr' : '55% 1fr',
        gap: isMobile ? 32 : 48,
        alignItems: 'center', position: 'relative', zIndex: 1,
      }}>
        {/* Content */}
        <div>
          <div style={{
            display: 'inline-block', padding: '7px 18px', borderRadius: 24,
            border: '1.5px solid rgba(255,255,255,0.5)', color: '#fff',
            fontSize: isMobile ? 10 : 11, fontWeight: 600, letterSpacing: '0.08em',
            textTransform: 'uppercase', marginBottom: isMobile ? 16 : 24,
          }}>
            1st Time in A.P. & Telangana
          </div>

          <h1 style={{
            fontSize: isMobile ? 32 : isTablet ? 40 : 56,
            fontWeight: 700, color: '#fff', lineHeight: 1.1,
            letterSpacing: '-0.02em', margin: '0 0 16px',
            fontFamily: "'IBM Plex Sans', sans-serif",
          }}>
            Career-Driven Cyber Security.{isMobile ? ' ' : <br/>}
            <span style={{
              textDecoration: 'underline', textDecorationColor: '#FFB81C',
              textDecorationThickness: isMobile ? 3 : 4, textUnderlineOffset: isMobile ? 5 : 8,
            }}>Built with KPMG.</span> Certified globally.
          </h1>

          <p style={{
            fontSize: isMobile ? 15 : 18, color: 'rgba(255,255,255,0.85)', lineHeight: 1.65,
            margin: '0 0 24px', maxWidth: 520, fontWeight: 400,
          }}>
            B.Tech in Computer Science & Engineering (Cyber Security) — co-created with KPMG in India and academically partnered with Macquarie University, Sydney's Cyber Skills Academy.
          </p>

          {/* Cascade */}
          {!isMobile && <CascadeMotif />}

          {/* CTAs */}
          <div style={{ display: 'flex', gap: 10, marginTop: isMobile ? 4 : 28, flexWrap: 'wrap' }}>
            <a href="tel:+918977780866" style={{
              padding: isMobile ? '12px 20px' : '14px 28px', borderRadius: 8, background: '#fff',
              color: '#1E1E78', fontSize: isMobile ? 14 : 15, fontWeight: 700,
              textDecoration: 'none', fontFamily: "'IBM Plex Sans', sans-serif",
              flex: isMobile ? '1' : 'unset', textAlign: 'center',
            }}>Talk to Career Advisor</a>
            <a href="#curriculum" style={{
              padding: isMobile ? '11px 19px' : '13px 27px', borderRadius: 8, background: 'transparent',
              border: '2px solid rgba(255,255,255,0.5)', color: '#fff',
              fontSize: isMobile ? 14 : 15, fontWeight: 600, textDecoration: 'none',
              fontFamily: "'IBM Plex Sans', sans-serif",
              flex: isMobile ? '1' : 'unset', textAlign: 'center',
            }}>Download Brochure</a>
          </div>

          <div style={{
            marginTop: 20, fontSize: isMobile ? 11 : 12,
            color: 'rgba(255,255,255,0.6)', fontWeight: 500, letterSpacing: '0.02em',
          }}>
            NAAC A++ Accredited · NIRF Ranked · 47 Years of Excellence
          </div>
        </div>

        {/* Lead Form */}
        <div id="apply" style={{
          background: '#FBE4C4', borderRadius: 16,
          padding: isMobile ? '28px 20px' : '32px 28px',
          boxShadow: '0 8px 32px rgba(0,0,0,0.2)',
        }}>
          <h3 style={{
            fontSize: isMobile ? 18 : 20, fontWeight: 700, color: '#1E1E78', margin: '0 0 4px',
            fontFamily: "'IBM Plex Sans', sans-serif",
          }}>Get personalised course details</h3>
          <p style={{
            fontSize: 13, color: '#4A4A4A', margin: '0 0 18px', lineHeight: 1.5,
          }}>A counsellor will call you back within 4 working hours.</p>

          <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <input style={inputStyle} placeholder="Full Name" required
              value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} />
            <div style={{ display: 'flex', gap: 0 }}>
              <span style={{
                padding: '13px 12px', borderRadius: '8px 0 0 8px',
                border: '1.5px solid #ddd', borderRight: 'none',
                fontSize: 14, color: '#666', background: '#f9f9f9',
                fontFamily: "'IBM Plex Sans', sans-serif",
              }}>+91</span>
              <input style={{ ...inputStyle, borderRadius: '0 8px 8px 0' }}
                placeholder="Mobile Number" type="tel" required
                value={formData.mobile} onChange={e => setFormData({...formData, mobile: e.target.value})} />
            </div>
            <input style={inputStyle} placeholder="Email (optional)" type="email"
              value={formData.email} onChange={e => setFormData({...formData, email: e.target.value})} />
            <input style={inputStyle} placeholder="City" required
              value={formData.city} onChange={e => setFormData({...formData, city: e.target.value})} />
            <select style={{ ...inputStyle, color: formData.year ? '#1A1A1A' : '#888' }}
              value={formData.year} onChange={e => setFormData({...formData, year: e.target.value})} required>
              <option value="" disabled>Year of 12th Completion</option>
              <option value="2025">2025</option>
              <option value="2026">2026</option>
              <option value="completed">Already Completed</option>
            </select>
            <label style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 12, color: '#4A4A4A', cursor: 'pointer', marginTop: 2 }}>
              <input type="checkbox" required style={{ marginTop: 2, flexShrink: 0 }} />
              <span>I agree to be contacted by GGU about this program.</span>
            </label>
            <button type="submit" style={{
              width: '100%', padding: '14px', borderRadius: 8, border: 'none',
              background: 'linear-gradient(90deg, #E0231C, #7A1F7C)',
              color: '#fff', fontSize: 16, fontWeight: 700, cursor: 'pointer',
              fontFamily: "'IBM Plex Sans', sans-serif", marginTop: 4,
            }}>Request a Callback</button>
            <p style={{ fontSize: 10, color: '#8A8A8A', textAlign: 'center', margin: 0 }}>
              Your details are confidential and never shared with third parties.
            </p>
          </form>
        </div>
      </div>
    </section>
  );
};

/* ── Cascade Motif ───────────────────────────────────────────── */
const CascadeMotif = () => {
  const steps = [
    { label: 'Co-created', color: '#F37021' },
    { label: 'Co-delivered', color: '#E8601A' },
    { label: 'Globally-certified', color: '#E0231C' },
  ];
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
        {steps.map((s, i) => (
          <div key={i} style={{
            background: s.color, color: '#fff', padding: '7px 16px',
            fontSize: 12, fontWeight: 600, width: 130 + i * 28,
            borderRadius: i === 0 ? '6px 6px 0 0' : i === 2 ? '0 0 6px 6px' : 0,
          }}>{s.label}</div>
        ))}
      </div>
      <div style={{
        width: 0, height: 0, borderLeft: '18px solid #E0231C',
        borderTop: '14px solid transparent', borderBottom: '14px solid transparent',
      }}></div>
      <div style={{ background: '#FBE4C4', borderRadius: 10, padding: '12px 16px', textAlign: 'center' }}>
        <div style={{ fontSize: 16, fontWeight: 700, color: '#00338D', letterSpacing: '0.04em' }}>KPMG</div>
        <div style={{ fontSize: 8, color: '#666', fontWeight: 500 }}>IN INDIA</div>
        <div style={{ borderTop: '1px solid #ddd', marginTop: 6, paddingTop: 6 }}>
          <div style={{ fontSize: 10, fontWeight: 700, color: '#333' }}>MACQUARIE</div>
          <div style={{ fontSize: 7, color: '#888', letterSpacing: '0.04em' }}>SYDNEY, AUSTRALIA</div>
        </div>
      </div>
    </div>
  );
};

/* ── Section 2: Trust Strip ──────────────────────────────────── */
const TrustStrip = () => {
  const { isMobile } = useResponsive();
  const badges = [
    '47 Years of Excellence', 'NAAC A++ (3rd Cycle)',
    'NIRF Rank Band 201–300', 'Outlook No. 1 in A.P.',
    'Times Business Awards', 'ASSOCHAM', 'NITI Aayog AIM',
  ];
  const partners = ['KPMG in India', 'Macquarie University', 'GGU Industry Edge'];

  return (
    <section style={{
      background: '#fff', borderTop: '1px solid #eee', borderBottom: '1px solid #eee',
      padding: isMobile ? '0 16px' : '0 40px',
      height: isMobile ? 'auto' : 80,
      display: 'flex', flexDirection: isMobile ? 'column' : 'row',
      alignItems: 'center', justifyContent: 'space-between',
      fontFamily: "'IBM Plex Sans', sans-serif",
      overflow: isMobile ? 'auto' : 'hidden',
      gap: isMobile ? 0 : 20,
    }}>
      <div style={{
        display: 'flex', gap: isMobile ? 14 : 20, alignItems: 'center',
        overflowX: isMobile ? 'auto' : 'visible',
        padding: isMobile ? '12px 0' : 0, width: '100%',
        WebkitOverflowScrolling: 'touch',
      }}>
        {badges.map((b, i) => (
          <div key={i} style={{
            fontSize: isMobile ? 10 : 11, fontWeight: 600, color: '#8A8A8A',
            letterSpacing: '0.02em', whiteSpace: 'nowrap',
          }}>{b}</div>
        ))}
      </div>
      {!isMobile && (
        <div style={{ display: 'flex', gap: 20, alignItems: 'center', flexShrink: 0 }}>
          {partners.map((p, i) => (
            <div key={i} style={{
              fontSize: 12, fontWeight: 700, whiteSpace: 'nowrap',
              color: i === 0 ? '#00338D' : i === 1 ? '#333' : '#1E1E78',
            }}>{p}</div>
          ))}
        </div>
      )}
    </section>
  );
};

Object.assign(window, { StickyNav, HeroSection, TrustStrip, CascadeMotif });