/* LabsCampusFee.jsx — Sections 11–14: FULLY RESPONSIVE */

const LabsSection = () => {
  const { isMobile } = useResponsive();
  const tiles = [
    { label: 'SOC Simulation Lab', desc: 'Live security operations centre environment running real-world threat scenarios.' },
    { label: 'Cyber Range', desc: 'Controlled environment for ethical hacking, network defence, and capture-the-flag exercises.' },
    { label: 'Digital Forensics Lab', desc: 'Hardware and software for breach investigation, malware analysis, and evidence handling.' },
    { label: 'Industry Certifications Built-In', desc: 'CompTIA Security+, CEH foundations, AWS Cloud Security, Microsoft Security Fundamentals — no extra cost.' },
  ];

  return (
    <section id="labs" style={{
      background: '#0D0D2B', padding: isMobile ? '64px 20px' : '96px 40px',
      fontFamily: "'IBM Plex Sans', sans-serif",
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#FFB81C', marginBottom: 12 }}>Inside the Classroom</div>
        <h2 style={{
          fontSize: isMobile ? 28 : 44, fontWeight: 700, color: '#fff', lineHeight: 1.15,
          letterSpacing: '-0.02em', margin: '0 0 40px',
        }}>Where theory meets the terminal.</h2>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 12 : 16,
        }}>
          {tiles.map((t, i) => (
            <div key={i} style={{
              borderRadius: 14, overflow: 'hidden', position: 'relative',
              minHeight: isMobile ? 160 : 200,
              background: i === 0 ? 'linear-gradient(135deg, #1a2a4a, #2a3a5a)'
                : i === 1 ? 'linear-gradient(135deg, #2a1a3a, #3a2a4a)'
                : i === 2 ? 'linear-gradient(135deg, #1a3a3a, #2a4a4a)'
                : 'linear-gradient(135deg, #3a1a2a, #4a2a3a)',
            }}>
              <div style={{
                position: 'absolute', inset: 0, display: 'flex',
                alignItems: 'center', justifyContent: 'center',
                color: 'rgba(255,255,255,0.12)', fontSize: 11, fontWeight: 500,
              }}>Photo Placeholder</div>
              <div style={{
                position: 'absolute', bottom: 0, left: 0, right: 0,
                background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
                padding: isMobile ? '32px 18px 16px' : '40px 24px 20px',
              }}>
                <h4 style={{ fontSize: isMobile ? 15 : 16, fontWeight: 700, color: '#fff', margin: '0 0 4px' }}>{t.label}</h4>
                <p style={{ fontSize: 12, color: 'rgba(255,255,255,0.75)', lineHeight: 1.5, margin: 0 }}>{t.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const CampusSection = () => {
  const { isMobile } = useResponsive();

  return (
    <section id="campus" style={{
      background: '#fff', padding: isMobile ? '64px 20px' : '96px 40px',
      fontFamily: "'IBM Plex Sans', sans-serif",
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 340px',
          gap: isMobile ? 28 : 48, alignItems: 'start',
        }}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#E0231C', marginBottom: 12 }}>The Campus</div>
            <h2 style={{
              fontSize: isMobile ? 26 : 36, fontWeight: 700, color: '#1E1E78', lineHeight: 1.2,
              letterSpacing: '-0.01em', margin: '0 0 24px',
            }}>Rajamahendravaram. Where you'll spend the four years that change your life.</h2>

            <div style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr 1fr' : '2fr 1fr',
              gap: 10,
            }}>
              {[0,1].map(i => (
                <div key={i} style={{
                  height: isMobile ? 140 : 200, borderRadius: 12,
                  background: i === 0 ? 'linear-gradient(135deg, #d4e4f4, #b4c4d4)' : 'linear-gradient(135deg, #e4d4c4, #c4b4a4)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: '#8A8A8A', fontSize: 11, fontWeight: 500,
                }}>Campus Photo {i + 1}</div>
              ))}
            </div>
            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 10, marginTop: 10,
            }}>
              {[0,1,2].map(i => (
                <div key={i} style={{
                  height: isMobile ? 100 : 140, borderRadius: 12,
                  background: i === 0 ? 'linear-gradient(135deg, #c4d4e4, #a4b4c4)' : i === 1 ? 'linear-gradient(135deg, #d4c4d4, #b4a4b4)' : 'linear-gradient(135deg, #c4e4c4, #a4c4a4)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: '#8A8A8A', fontSize: 10, fontWeight: 500,
                }}>Photo {i + 3}</div>
              ))}
            </div>
          </div>

          <div style={{ paddingTop: isMobile ? 0 : 48 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 24 }}>
              {[
                'Modern academic blocks, dedicated cyber labs, and a 24×7 SOC environment',
                'On-campus residences, sports, libraries, and student-led tech clubs',
                'Cultural festivals, hackathons, and inter-university cyber competitions',
              ].map((b, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                  <div style={{ width: 7, height: 7, background: '#1E1E78', flexShrink: 0, marginTop: 6 }}></div>
                  <span style={{ fontSize: 14, fontWeight: 500, color: '#1A1A1A', lineHeight: 1.5 }}>{b}</span>
                </div>
              ))}
            </div>
            <a href="#apply" style={{ fontSize: 14, fontWeight: 600, color: '#E0231C', textDecoration: 'none' }}>Plan a campus visit →</a>
          </div>
        </div>
      </div>
    </section>
  );
};

const FeeSection = () => {
  const { isMobile } = useResponsive();
  const included = [
    'Full B.Tech (CSE Cyber Security) curriculum',
    'KPMG-led specialisation modules',
    'Macquarie University co-credential',
    'All lab and infrastructure access',
    'Industry certifications (Security+, CEH foundations, cloud security)',
    'Internship placement support',
    'Career bootcamp and placement assistance',
  ];
  const notIncluded = [
    'Hostel, mess, and transport (separate, optional)',
    'Examination, registration, and one-time university charges',
    'Optional Macquarie immersion programme (if availed)',
  ];

  return (
    <section id="fee" style={{
      background: '#F7F8FA', padding: isMobile ? '64px 20px' : '96px 40px',
      fontFamily: "'IBM Plex Sans', sans-serif",
    }}>
      <div style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#E0231C', marginBottom: 12 }}>Your Investment</div>
        <h2 style={{
          fontSize: isMobile ? 28 : 44, fontWeight: 700, color: '#1E1E78', lineHeight: 1.15,
          letterSpacing: '-0.02em', margin: '0 0 28px',
        }}>One transparent fee. Everything that matters, included.</h2>

        <div style={{
          background: '#FBE4C4', borderRadius: 20, padding: isMobile ? '28px 20px' : '40px 32px',
          display: 'inline-block', marginBottom: 36,
        }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 4 }}>
            <span style={{
              fontSize: isMobile ? 32 : 48, fontWeight: 700,
              background: 'linear-gradient(90deg, #1E1E78, #7A1F7C, #E0231C)',
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            }}>₹</span>
            <span style={{
              fontSize: isMobile ? 56 : 84, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1,
              background: 'linear-gradient(90deg, #1E1E78, #7A1F7C, #E0231C)',
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            }}>4.0</span>
            <span style={{ fontSize: isMobile ? 18 : 24, fontWeight: 700, color: '#1A1A1A', marginLeft: 4 }}>Lakh</span>
          </div>
          <div style={{
            fontSize: isMobile ? 14 : 16, fontWeight: 500, color: '#4A4A4A', marginTop: 4,
            textDecoration: 'underline', textDecorationColor: '#FFB81C', textDecorationThickness: 3, textUnderlineOffset: 4,
          }}>per annum</div>
          <div style={{ fontSize: 14, color: '#8A8A8A', marginTop: 8 }}>
            Total programme fee: <strong style={{ color: '#1A1A1A' }}>₹16.0 Lakh</strong> over four years.
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 24 : 32, textAlign: 'left', maxWidth: 800, margin: '0 auto 28px',
        }}>
          <div>
            <h4 style={{ fontSize: 14, fontWeight: 700, color: '#1E1E78', marginBottom: 12 }}>Tuition includes:</h4>
            {included.map((item, i) => (
              <div key={i} style={{ display: 'flex', gap: 8, marginBottom: 8, alignItems: 'flex-start' }}>
                <div style={{ width: 6, height: 6, background: '#1E1E78', flexShrink: 0, marginTop: 6 }}></div>
                <span style={{ fontSize: 13, color: '#1A1A1A', fontWeight: 500 }}>{item}</span>
              </div>
            ))}
          </div>
          <div>
            <h4 style={{ fontSize: 14, fontWeight: 700, color: '#8A8A8A', marginBottom: 12 }}>Not included:</h4>
            {notIncluded.map((item, i) => (
              <div key={i} style={{ display: 'flex', gap: 8, marginBottom: 8, alignItems: 'flex-start' }}>
                <div style={{ width: 6, height: 6, background: '#D4D4D4', flexShrink: 0, marginTop: 6 }}></div>
                <span style={{ fontSize: 13, color: '#4A4A4A', fontWeight: 500 }}>{item}</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{
          background: '#FBE4C4', borderRadius: 12, padding: isMobile ? '16px' : '20px 24px',
          display: 'flex', gap: isMobile ? 16 : 32,
          flexDirection: isMobile ? 'column' : 'row',
          justifyContent: 'center', textAlign: 'left',
          maxWidth: 700, margin: '0 auto 24px',
        }}>
          <div>
            <strong style={{ fontSize: 13, color: '#1E1E78' }}>Scholarships:</strong>
            <span style={{ fontSize: 13, color: '#4A4A4A', marginLeft: 6 }}>Merit-based for top entrance scorers.</span>
          </div>
          <div>
            <strong style={{ fontSize: 13, color: '#1E1E78' }}>Education loans:</strong>
            <span style={{ fontSize: 13, color: '#4A4A4A', marginLeft: 6 }}>Tie-ups with leading banks.</span>
          </div>
        </div>

        <a href="tel:+918977780866" style={{
          display: 'inline-block', padding: '14px 28px', borderRadius: 8,
          background: 'linear-gradient(90deg, #E0231C, #7A1F7C)',
          color: '#fff', fontSize: 15, fontWeight: 700,
          textDecoration: 'none', fontFamily: "'IBM Plex Sans', sans-serif",
        }}>Talk to fee counsellor</a>
      </div>
    </section>
  );
};

const AdmissionSection = () => {
  const { isMobile } = useResponsive();
  const steps = [
    { num: '01', title: 'Apply Online', desc: '5-minute application form. No application fee.' },
    { num: '02', title: 'Counsellor Call', desc: 'Within 24 hours, a counsellor reaches out.' },
    { num: '03', title: 'Eligibility Check', desc: '10+2 with PCM, min 60%. EAPCET / JEE Main accepted.' },
    { num: '04', title: 'Offer Letter', desc: 'Provisional offer within 3 working days.' },
    { num: '05', title: 'Confirm Seat', desc: 'Accept offer, pay fees, join orientation.' },
  ];
  const [visibleStep, setVisibleStep] = React.useState(0);
  const [ref, inView] = useInView(0.3);

  React.useEffect(() => {
    if (!inView) return;
    const timers = steps.map((_, i) => setTimeout(() => setVisibleStep(i), i * 400));
    return () => timers.forEach(clearTimeout);
  }, [inView]);

  return (
    <section id="admission" ref={ref} style={{
      background: '#fff', padding: isMobile ? '64px 20px' : '96px 40px',
      fontFamily: "'IBM Plex Sans', sans-serif",
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#E0231C', marginBottom: 12, textAlign: 'center' }}>How to Apply</div>
        <h2 style={{
          fontSize: isMobile ? 28 : 44, fontWeight: 700, color: '#1E1E78', lineHeight: 1.15,
          letterSpacing: '-0.02em', margin: '0 0 40px', textAlign: 'center',
        }}>Five steps. One career-changing decision.</h2>

        {/* Stepper */}
        {isMobile ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 32 }}>
            {steps.map((s, i) => (
              <div key={i} style={{
                display: 'flex', gap: 16, alignItems: 'flex-start',
                opacity: i <= visibleStep ? 1 : 0.3, transition: '0.4s ease',
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: '50%', flexShrink: 0,
                  background: i <= visibleStep ? 'linear-gradient(135deg, #1E1E78, #7A1F7C)' : '#F0F0F0',
                  color: i <= visibleStep ? '#fff' : '#8A8A8A',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 16, fontWeight: 700,
                }}>{s.num}</div>
                <div>
                  <h4 style={{ fontSize: 15, fontWeight: 700, color: '#1E1E78', margin: '0 0 2px' }}>{s.title}</h4>
                  <p style={{ fontSize: 13, color: '#4A4A4A', lineHeight: 1.4, margin: 0 }}>{s.desc}</p>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div style={{ display: 'flex', gap: 0, position: 'relative', marginBottom: 48 }}>
            <div style={{
              position: 'absolute', top: 28, left: 28, right: 28, height: 3,
              background: '#F0F0F0', borderRadius: 2,
            }}>
              <div style={{
                height: '100%', borderRadius: 2,
                background: 'linear-gradient(90deg, #1E1E78, #7A1F7C, #E0231C)',
                width: `${(visibleStep / (steps.length - 1)) * 100}%`,
                transition: 'width 0.6s ease',
              }}></div>
            </div>
            {steps.map((s, i) => (
              <div key={i} style={{
                flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center',
                textAlign: 'center', position: 'relative',
                opacity: i <= visibleStep ? 1 : 0.3, transition: 'opacity 0.4s ease',
              }}>
                <div style={{
                  width: 56, height: 56, borderRadius: '50%',
                  background: i <= visibleStep ? 'linear-gradient(135deg, #1E1E78, #7A1F7C)' : '#F0F0F0',
                  color: i <= visibleStep ? '#fff' : '#8A8A8A',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 18, fontWeight: 700, marginBottom: 14, zIndex: 1,
                }}>{s.num}</div>
                <h4 style={{ fontSize: 14, fontWeight: 700, color: '#1E1E78', margin: '0 0 4px' }}>{s.title}</h4>
                <p style={{ fontSize: 12, color: '#4A4A4A', lineHeight: 1.5, margin: 0, maxWidth: 160 }}>{s.desc}</p>
              </div>
            ))}
          </div>
        )}

        <div style={{
          background: 'linear-gradient(90deg, #E0231C, #7A1F7C)', borderRadius: 12,
          padding: isMobile ? '20px' : '24px 32px',
          display: 'flex', flexDirection: isMobile ? 'column' : 'row',
          alignItems: isMobile ? 'stretch' : 'center',
          justifyContent: 'space-between', gap: isMobile ? 16 : 0,
        }}>
          <div style={{ fontSize: isMobile ? 16 : 18, fontWeight: 700, color: '#fff' }}>
            Applications closing soon. Limited seats — cohort capped at 60 students.
          </div>
          <a href="#apply" style={{
            padding: '12px 24px', borderRadius: 8, background: '#fff',
            color: '#E0231C', fontSize: 14, fontWeight: 700,
            textDecoration: 'none', fontFamily: "'IBM Plex Sans', sans-serif",
            whiteSpace: 'nowrap', flexShrink: 0, textAlign: 'center',
          }}>Start your application</a>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { LabsSection, CampusSection, FeeSection, AdmissionSection });