/* DemandAndProgram.jsx — Sections 3–4: FULLY RESPONSIVE + REDESIGNED PROGRAM */

/* ── Hooks ───────────────────────────────────────────────────── */
const useCountUp = (target, duration = 2000, inView = false) => {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    if (!inView) return;
    let start = 0;
    const step = (ts) => {
      if (!start) start = ts;
      const progress = Math.min((ts - start) / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      setVal(Math.round(target * eased));
      if (progress < 1) requestAnimationFrame(step);
    };
    requestAnimationFrame(step);
  }, [inView, target, duration]);
  return val;
};

const useInView = (threshold = 0.3) => {
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);
  React.useEffect(() => {
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) setInView(true); },
      { threshold }
    );
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, inView];
};

/* ── Section 3: Cyber Security Demand ────────────────────────── */
const CyberDemandSection = () => {
  const { isMobile } = useResponsive();
  const [ref, inView] = useInView(0.2);
  const stat1 = useCountUp(1, 2000, inView);
  const stat3 = useCountUp(30, 2000, inView);

  return (
    <section id="cyber-demand" ref={ref} style={{
      background: '#F7F8FA', padding: isMobile ? '64px 20px' : '96px 40px',
      fontFamily: "'IBM Plex Sans', sans-serif", textAlign: 'center',
    }}>
      <div style={{
        fontSize: 12, fontWeight: 600, letterSpacing: '0.1em',
        textTransform: 'uppercase', color: '#E0231C', marginBottom: 12,
      }}>The Cyber Opportunity</div>

      <h2 style={{
        fontSize: isMobile ? 28 : 44, fontWeight: 700, color: '#1E1E78', lineHeight: 1.15,
        letterSpacing: '-0.02em', margin: '0 auto 16px', maxWidth: 800,
      }}>
        India needs cyber defenders. The world is hiring them at premium salaries.
      </h2>

      <p style={{
        fontSize: isMobile ? 15 : 18, color: '#4A4A4A', lineHeight: 1.65,
        margin: '0 auto 40px', maxWidth: 720, fontWeight: 400,
      }}>
        Cyberattacks against Indian organisations grew sharply over the last five years. India faces a projected shortage of nearly one million skilled cyber security professionals — and global firms are paying entry-level talent above the market average to fill the gap.
      </p>

      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
        gap: isMobile ? 16 : 32,
        maxWidth: 900, margin: '0 auto 20px',
      }}>
        {[
          { num: `~${stat1} Million`, caption: 'Estimated cyber security talent gap in India' },
          { num: '₹6–12 LPA', caption: 'Typical fresher package for skilled cyber roles' },
          { num: `${stat3}%+`, caption: 'Year-on-year growth in demand for cyber professionals' },
        ].map((s, i) => (
          <div key={i} style={{
            padding: isMobile ? '24px 20px' : '32px 20px',
            background: '#fff', borderRadius: 14,
            boxShadow: '0 2px 12px rgba(0,0,0,0.04)',
          }}>
            <div style={{
              fontSize: isMobile ? 32 : 40, fontWeight: 700, lineHeight: 1.1,
              background: 'linear-gradient(90deg, #1E1E78, #7A1F7C, #E0231C)',
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              marginBottom: 8,
            }}>{s.num}</div>
            <div style={{ fontSize: isMobile ? 13 : 14, color: '#4A4A4A', fontWeight: 500 }}>{s.caption}</div>
          </div>
        ))}
      </div>

      <p style={{ fontSize: 11, color: '#8A8A8A', fontStyle: 'italic', margin: '0 0 24px' }}>
        Source: industry estimates including DSCI, NASSCOM, and major recruitment firms.
      </p>
      <p style={{ fontSize: isMobile ? 17 : 20, fontWeight: 600, color: '#1E1E78', margin: 0 }}>
        This program is built for that demand.
      </p>
    </section>
  );
};

/* ── Section 4: Program at a Glance — REDESIGNED ─────────────── */
const ProgramGlanceSection = () => {
  const { isMobile, isTablet } = useResponsive();

  const facts = [
    { label: 'Duration', value: '4 Years · 8 Semesters', icon: '⏱' },
    { label: 'Degree', value: 'B.Tech CSE (Cyber Security)', sub: 'UGC-recognised · NAAC A++ university' },
    { label: 'Co-created with', value: 'KPMG in India', highlight: true },
    { label: 'Academic Partner', value: 'Macquarie University Sydney', sub: 'Cyber Skills Academy' },
    { label: 'Tuition Fee', value: '₹4.0 Lakh per annum', highlight: true },
    { label: 'Campus', value: 'Rajamahendravaram, Andhra Pradesh' },
  ];

  return (
    <section id="program-glance" style={{
      background: 'linear-gradient(150deg, #0D0D2B 0%, #1E1E78 100%)',
      padding: isMobile ? '64px 20px' : '96px 40px',
      fontFamily: "'IBM Plex Sans', sans-serif",
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Subtle grid pattern overlay */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.04,
        backgroundImage: 'linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)',
        backgroundSize: '40px 40px',
        pointerEvents: 'none',
      }}></div>

      <div style={{
        maxWidth: 1100, margin: '0 auto', position: 'relative', zIndex: 1,
      }}>
        {/* Section header */}
        <div style={{ textAlign: 'center', marginBottom: isMobile ? 32 : 48 }}>
          <div style={{
            fontSize: 12, fontWeight: 600, letterSpacing: '0.1em',
            textTransform: 'uppercase', color: '#FFB81C', marginBottom: 12,
          }}>Program Overview</div>
          <h2 style={{
            fontSize: isMobile ? 28 : 44, fontWeight: 700, color: '#fff',
            lineHeight: 1.15, letterSpacing: '-0.02em', margin: '0 auto 12px',
            maxWidth: 700,
          }}>
            Everything you need to know, at a glance.
          </h2>
          <p style={{
            fontSize: isMobile ? 14 : 16, color: 'rgba(255,255,255,0.6)',
            margin: '0 auto', maxWidth: 500,
          }}>
            A degree built for the cyber security era. Co-created with industry leaders.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1fr' : '1fr 360px',
          gap: isMobile ? 24 : 40, alignItems: 'start',
        }}>
          {/* Facts grid */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
            gap: isMobile ? 12 : 16,
          }}>
            {facts.map((f, i) => (
              <div key={i} style={{
                background: f.highlight
                  ? 'linear-gradient(135deg, rgba(255,184,28,0.12), rgba(243,112,33,0.08))'
                  : 'rgba(255,255,255,0.06)',
                borderRadius: 14,
                padding: isMobile ? '20px' : '24px',
                border: f.highlight
                  ? '1px solid rgba(255,184,28,0.25)'
                  : '1px solid rgba(255,255,255,0.08)',
                transition: '0.2s ease',
              }}>
                <div style={{
                  fontSize: 11, fontWeight: 600, letterSpacing: '0.06em',
                  textTransform: 'uppercase',
                  color: f.highlight ? '#FFB81C' : 'rgba(255,255,255,0.45)',
                  marginBottom: 8,
                }}>{f.label}</div>
                <div style={{
                  fontSize: isMobile ? 17 : 19, fontWeight: 700,
                  color: '#fff', lineHeight: 1.3,
                }}>{f.value}</div>
                {f.sub && (
                  <div style={{
                    fontSize: 12, color: 'rgba(255,255,255,0.5)', marginTop: 4,
                    fontWeight: 500,
                  }}>{f.sub}</div>
                )}
              </div>
            ))}
          </div>

          {/* Right: CTA card with fee highlight */}
          <div style={{
            background: '#fff', borderRadius: 20, padding: isMobile ? '28px 20px' : '36px 28px',
            textAlign: 'center',
            boxShadow: '0 8px 32px rgba(0,0,0,0.3)',
          }}>
            {/* Fee callout */}
            <div style={{
              fontSize: 12, fontWeight: 600, letterSpacing: '0.08em',
              textTransform: 'uppercase', color: '#E0231C', marginBottom: 8,
            }}>Course Fee</div>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 3 }}>
              <span style={{
                fontSize: 36, fontWeight: 700,
                background: 'linear-gradient(90deg, #1E1E78, #7A1F7C, #E0231C)',
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              }}>₹</span>
              <span style={{
                fontSize: 64, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1,
                background: 'linear-gradient(90deg, #1E1E78, #7A1F7C, #E0231C)',
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              }}>4.0</span>
              <span style={{ fontSize: 18, fontWeight: 700, color: '#1A1A1A', marginLeft: 4 }}>LPA</span>
            </div>
            <div style={{
              fontSize: 13, color: '#4A4A4A', marginTop: 4,
              textDecoration: 'underline', textDecorationColor: '#FFB81C',
              textDecorationThickness: 2, textUnderlineOffset: 4,
            }}>per annum · all inclusive</div>

            <div style={{
              marginTop: 20, padding: '14px 16px', borderRadius: 10,
              background: '#F7F8FA', fontSize: 12, color: '#4A4A4A', lineHeight: 1.6,
              textAlign: 'left',
            }}>
              <div style={{ display: 'flex', gap: 8, marginBottom: 6, alignItems: 'flex-start' }}>
                <div style={{ width: 5, height: 5, background: '#1E1E78', flexShrink: 0, marginTop: 5 }}></div>
                <span>KPMG-led specialisation modules</span>
              </div>
              <div style={{ display: 'flex', gap: 8, marginBottom: 6, alignItems: 'flex-start' }}>
                <div style={{ width: 5, height: 5, background: '#1E1E78', flexShrink: 0, marginTop: 5 }}></div>
                <span>Macquarie University co-credential</span>
              </div>
              <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                <div style={{ width: 5, height: 5, background: '#1E1E78', flexShrink: 0, marginTop: 5 }}></div>
                <span>Industry certifications included</span>
              </div>
            </div>

            <a href="#apply" style={{
              display: 'block', marginTop: 20, padding: '14px', borderRadius: 10,
              background: 'linear-gradient(90deg, #E0231C, #7A1F7C)',
              color: '#fff', fontSize: 15, fontWeight: 700,
              textDecoration: 'none', fontFamily: "'IBM Plex Sans', sans-serif",
            }}>Apply Now — Limited to 60 Seats</a>

            <a href="tel:+918977780866" style={{
              display: 'block', marginTop: 10, padding: '12px', borderRadius: 10,
              border: '2px solid #1E1E78', color: '#1E1E78',
              fontSize: 14, fontWeight: 600, textDecoration: 'none',
              fontFamily: "'IBM Plex Sans', sans-serif",
            }}>Talk to a Counsellor</a>

            <div style={{
              marginTop: 16, fontSize: 11, color: '#8A8A8A',
            }}>
              Merit scholarships available for top scorers
            </div>
          </div>
        </div>

        {/* Bottom CTA link */}
        <div style={{ textAlign: 'center', marginTop: isMobile ? 24 : 40 }}>
          <a href="#curriculum" style={{
            color: '#FFB81C', fontSize: 14, fontWeight: 600, textDecoration: 'none',
          }}>See full 8-semester curriculum →</a>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { CyberDemandSection, ProgramGlanceSection, useInView, useCountUp });