/* CareersAndFoundation.jsx — Sections 9–10: FULLY RESPONSIVE */

const CareersSection = () => {
  const { isMobile } = useResponsive();
  const roles = [
    { title: 'Cyber Security Analyst', salary: '₹5–9 LPA', desc: 'Monitor, detect, and respond to security incidents in a SOC environment.' },
    { title: 'Penetration Tester / Ethical Hacker', salary: '₹6–12 LPA', desc: 'Find vulnerabilities before attackers do, across networks, web apps, and mobile.' },
    { title: 'Cyber Forensics Investigator', salary: '₹6–10 LPA', desc: 'Investigate breaches, trace attackers, and preserve digital evidence.' },
    { title: 'Cloud Security Engineer', salary: '₹7–14 LPA', desc: 'Design and defend cloud-native infrastructure on AWS, Azure, GCP.' },
    { title: 'GRC Consultant', salary: '₹5–10 LPA', desc: 'Help organisations meet regulatory, audit, and risk requirements.' },
    { title: 'AI Security Specialist', salary: '₹8–16 LPA', desc: 'Defend AI systems and use AI to detect threats at scale.' },
    { title: 'Threat Intelligence Analyst', salary: '₹6–12 LPA', desc: 'Track adversaries, profile attack groups, and surface early warnings.' },
  ];
  const hiringPartners = [
    'Deloitte', 'EY', 'PwC', 'KPMG', 'Infosys', 'TCS', 'Wipro',
    'HCLTech', 'Accenture', 'Tech Mahindra', 'IBM', 'CrowdStrike',
    'Palo Alto Networks', 'Mandiant', 'Check Point', 'Fortinet', 'Rapid7',
  ];

  return (
    <section id="careers" style={{
      background: '#F7F8FA', padding: isMobile ? '64px 0' : '96px 0',
      fontFamily: "'IBM Plex Sans', sans-serif",
    }}>
      <div style={{ padding: isMobile ? '0 20px' : '0 40px', maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#E0231C', marginBottom: 12 }}>Career Outcomes</div>
        <h2 style={{
          fontSize: isMobile ? 28 : 44, fontWeight: 700, color: '#1E1E78', lineHeight: 1.15,
          letterSpacing: '-0.02em', margin: '0 0 8px',
        }}>Where this degree takes you.</h2>
        <p style={{ fontSize: isMobile ? 14 : 16, color: '#4A4A4A', margin: '0 0 28px' }}>
          Roles, indicative salaries, and the skills you'll build across four years.
        </p>
      </div>

      <div style={{
        display: 'flex', gap: 14, overflowX: 'auto',
        padding: isMobile ? '0 20px 16px' : '0 40px 16px',
        scrollSnapType: 'x mandatory', WebkitOverflowScrolling: 'touch',
        scrollbarWidth: 'thin',
      }}>
        {roles.map((r, i) => (
          <div key={i} style={{
            minWidth: isMobile ? 260 : 280, maxWidth: 300,
            background: '#fff', borderRadius: 14,
            padding: isMobile ? '22px 20px' : '28px 24px',
            flexShrink: 0, scrollSnapAlign: 'start',
            border: '1px solid #eee', transition: '0.2s ease', cursor: 'pointer',
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.08)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
          >
            <div style={{ width: 10, height: 10, background: '#1E1E78', marginBottom: 14 }}></div>
            <h4 style={{ fontSize: 15, fontWeight: 700, color: '#1A1A1A', margin: '0 0 6px', lineHeight: 1.3 }}>{r.title}</h4>
            <div style={{
              fontSize: 18, fontWeight: 700, marginBottom: 10,
              background: 'linear-gradient(90deg, #1E1E78, #E0231C)',
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            }}>{r.salary}</div>
            <p style={{ fontSize: 13, color: '#4A4A4A', lineHeight: 1.6, margin: '0 0 12px' }}>{r.desc}</p>
            <span style={{ fontSize: 12, fontWeight: 600, color: '#E0231C' }}>Explore this path →</span>
          </div>
        ))}
      </div>

      <div style={{ padding: isMobile ? '0 20px' : '0 40px', maxWidth: 1180, margin: '0 auto' }}>
        <p style={{ fontSize: 11, color: '#8A8A8A', fontStyle: 'italic', margin: '8px 0 40px' }}>
          Salary bands are indicative, based on industry reports for entry to mid-level roles in India, 2024–25.
        </p>
        <h3 style={{ fontSize: isMobile ? 18 : 22, fontWeight: 700, color: '#1E1E78', margin: '0 0 16px' }}>Where our graduates can land.</h3>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: isMobile ? 8 : 12 }}>
          {hiringPartners.map((p, i) => (
            <div key={i} style={{
              padding: isMobile ? '8px 14px' : '10px 18px', borderRadius: 8,
              background: '#fff', border: '1px solid #e8e8e8',
              fontSize: isMobile ? 12 : 13, fontWeight: 600, color: '#8A8A8A',
            }}>{p}</div>
          ))}
        </div>
        <p style={{ fontSize: 11, color: '#8A8A8A', fontStyle: 'italic', marginTop: 12 }}>
          Indicative target employers — based on cyber security hiring patterns in India.
        </p>
      </div>
    </section>
  );
};

const GGUFoundationSection = () => {
  const { isMobile } = useResponsive();
  const tiles = [
    { title: 'NAAC A++ Accreditation (3rd Cycle)', body: 'The highest grade awarded by India\'s apex higher education accreditation body. A signal of academic rigour, faculty quality, and institutional governance.' },
    { title: 'NIRF Ranked — 6 Consecutive Years', body: 'Ranked in the 201–300 band by India\'s official Ministry of Education ranking system, year after year.' },
    { title: '47 Years of Educational Excellence', body: 'Part of one of A.P.\'s most respected educational groups, with a track record spanning four decades.' },
    { title: 'UC Berkeley Haas Partnership', body: 'Academic partnership with the University of California, Berkeley\'s Haas School of Business — bringing world-class teaching frameworks to GGU classrooms.' },
    { title: '100+ Patents Filed', body: 'A research-active institution with faculty and student innovation contributing to over a hundred patent filings.' },
    { title: 'Outlook — No. 1 Private University in A.P.', body: 'Independently rated by Outlook as the top private university in the state.' },
  ];

  return (
    <section id="ggu-foundation" 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 }}>Why GGU</div>
        <h2 style={{
          fontSize: isMobile ? 28 : 44, fontWeight: 700, color: '#1E1E78', lineHeight: 1.15,
          letterSpacing: '-0.02em', margin: '0 0 8px',
        }}>A 47-year educational legacy. Built for the next 40.</h2>
        <p style={{
          fontSize: isMobile ? 14 : 16, color: '#4A4A4A', margin: '0 0 36px', maxWidth: 700,
        }}>
          Godavari Global University is one of Andhra Pradesh's most accredited private universities — and one of very few in the country to hold a NAAC A++ accreditation.
        </p>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 14 : 20, marginBottom: 32,
        }}>
          {tiles.map((t, i) => (
            <div key={i} style={{
              padding: isMobile ? '22px 20px' : '28px 24px',
              borderRadius: 14, background: '#fff', position: 'relative',
            }}>
              <div style={{
                position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
                borderRadius: 14, border: '1.5px solid transparent',
                background: 'linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #1E1E78, #7A1F7C, #E0231C) border-box',
                pointerEvents: 'none',
              }}></div>
              <h4 style={{ fontSize: 15, fontWeight: 700, color: '#1E1E78', margin: '0 0 8px', lineHeight: 1.3, position: 'relative' }}>{t.title}</h4>
              <p style={{ fontSize: 13, color: '#4A4A4A', lineHeight: 1.6, margin: 0, position: 'relative' }}>{t.body}</p>
            </div>
          ))}
        </div>

        <div style={{
          background: '#FBE4C4', borderRadius: 12, padding: isMobile ? '20px' : '24px 28px',
        }}>
          <p style={{ fontSize: isMobile ? 14 : 15, color: '#1A1A1A', lineHeight: 1.7, margin: 0 }}>
            In a higher-education market where credentials matter more than ever, GGU's A++ accreditation isn't a marketing claim — it's a verified, government-recognised standard. <a href="https://www.naac.gov.in" target="_blank" rel="noopener" style={{ color: '#1E1E78', fontWeight: 600 }}>Verify on the official NAAC website.</a>
          </p>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { CareersSection, GGUFoundationSection });