/* Partners.jsx — Sections 7–8: FULLY RESPONSIVE */

const KPMGSection = () => {
  const { isMobile } = useResponsive();
  const bullets = [
    'Curriculum co-designed by KPMG Cyber Consulting',
    'Quarterly masterclasses by KPMG senior practitioners',
    'Mentorship for final-year capstone projects',
    'Internship and project briefs from KPMG client engagements',
  ];

  return (
    <section id="kpmg" style={{
      background: '#fff', padding: isMobile ? '64px 20px' : '96px 40px',
      fontFamily: "'IBM Plex Sans', sans-serif",
    }}>
      <div style={{
        maxWidth: 1100, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
        gap: isMobile ? 32 : 56, alignItems: 'center',
      }}>
        {/* KPMG panel */}
        <div style={{
          background: '#00338D', borderRadius: 20,
          padding: isMobile ? '40px 28px' : '56px 40px',
          display: 'flex', flexDirection: 'column', alignItems: 'center',
          justifyContent: 'center', minHeight: isMobile ? 240 : 380,
          order: isMobile ? 1 : 0,
        }}>
          <div style={{ fontSize: isMobile ? 42 : 56, fontWeight: 700, color: '#fff', letterSpacing: '0.06em', marginBottom: 4 }}>KPMG</div>
          <div style={{ fontSize: 16, fontWeight: 500, color: 'rgba(255,255,255,0.7)', letterSpacing: '0.12em' }}>IN INDIA</div>
          <div style={{ marginTop: 32, width: 80, height: 1, background: 'rgba(255,255,255,0.2)' }}></div>
          <div style={{ marginTop: 20, fontSize: 12, color: 'rgba(255,255,255,0.5)', fontWeight: 500, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
            Cyber Consulting Practice
          </div>
        </div>

        {/* Copy */}
        <div style={{ order: isMobile ? 0 : 1 }}>
          <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#E0231C', marginBottom: 12 }}>Partner Spotlight</div>
          <h2 style={{
            fontSize: isMobile ? 26 : 36, fontWeight: 700, color: '#1E1E78', lineHeight: 1.2,
            letterSpacing: '-0.01em', margin: '0 0 20px',
          }}>Learn from the people who secure India's largest enterprises.</h2>
          <p style={{ fontSize: isMobile ? 14 : 16, color: '#4A4A4A', lineHeight: 1.7, margin: '0 0 12px' }}>
            KPMG in India is one of the country's most trusted advisory firms, with a Cyber Consulting practice that protects banks, governments, telecoms, and Fortune 500 companies operating in India.
          </p>
          <p style={{ fontSize: isMobile ? 14 : 16, color: '#4A4A4A', lineHeight: 1.7, margin: '0 0 24px' }}>
            Through this program, KPMG cyber consultants co-design the curriculum, deliver guest masterclasses, mentor capstone projects, and open doors for internships.
          </p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
            {bullets.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' }}>{b}</span>
              </div>
            ))}
          </div>

          <div style={{ borderLeft: '3px solid #1E1E78', paddingLeft: 20 }}>
            <p style={{ fontSize: isMobile ? 14 : 16, fontStyle: 'italic', color: '#1E1E78', lineHeight: 1.6, margin: '0 0 8px', fontWeight: 500 }}>
              "Cyber threats are only growing. India needs trained professionals who can think like attackers and defend like architects. That's what we're building at GGU."
            </p>
            <p style={{ fontSize: 12, color: '#8A8A8A', margin: 0 }}>
              — KPMG India, Cyber Consulting <span style={{ fontStyle: 'italic' }}>(placeholder)</span>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

const MacquarieSection = () => {
  const { isMobile } = useResponsive();
  const bullets = [
    'Co-credential from Macquarie University Sydney\'s Cyber Skills Academy',
    'Curriculum aligned to international cyber education benchmarks',
    'Optional short-term exchange and immersion opportunities (subject to eligibility)',
    'Credential recognised by global cyber recruiters',
  ];

  return (
    <section id="macquarie" style={{
      background: '#F7F8FA', padding: isMobile ? '64px 20px' : '96px 40px',
      fontFamily: "'IBM Plex Sans', sans-serif",
    }}>
      <div style={{
        maxWidth: 1100, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
        gap: isMobile ? 32 : 56, alignItems: 'center',
      }}>
        {/* Copy */}
        <div>
          <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#E0231C', marginBottom: 12 }}>Global Credential</div>
          <h2 style={{
            fontSize: isMobile ? 26 : 36, fontWeight: 700, color: '#1E1E78', lineHeight: 1.2,
            letterSpacing: '-0.01em', margin: '0 0 20px',
          }}>A credential that travels. Australia today. The world tomorrow.</h2>
          <p style={{ fontSize: isMobile ? 14 : 16, color: '#4A4A4A', lineHeight: 1.7, margin: '0 0 12px' }}>
            Macquarie University's Cyber Skills Academy in Sydney is one of Australia's most respected centres for cyber education. Through this partnership, GGU students earn a Macquarie co-credential alongside their B.Tech degree.
          </p>
          <p style={{ fontSize: isMobile ? 14 : 16, color: '#4A4A4A', lineHeight: 1.7, margin: '0 0 24px' }}>
            That credential signals globally that you've been trained to international standards — opening pathways to employers in Australia, the UK, the UAE, and across Indian IT services giants.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {bullets.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' }}>{b}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Macquarie panel */}
        <div style={{
          borderRadius: 20, overflow: 'hidden', position: 'relative',
          minHeight: isMobile ? 260 : 380,
          background: 'linear-gradient(135deg, #1a3a5c 0%, #2a5a8c 100%)',
          display: 'flex', flexDirection: 'column', alignItems: 'center',
          justifyContent: 'center', padding: isMobile ? '36px 24px' : '48px 40px',
        }}>
          <div style={{
            position: 'absolute', bottom: 0, left: 0, right: 0, height: '40%',
            background: 'linear-gradient(180deg, transparent, rgba(0,0,0,0.15))',
          }}></div>
          <div style={{
            background: '#FBE4C4', borderRadius: 14, padding: isMobile ? '24px' : '28px 32px',
            textAlign: 'center', position: 'relative', zIndex: 1,
          }}>
            <div style={{ fontSize: isMobile ? 24 : 28, fontWeight: 700, color: '#333', letterSpacing: '0.02em', marginBottom: 2 }}>MACQUARIE</div>
            <div style={{ fontSize: 20, fontWeight: 400, color: '#333' }}>University</div>
            <div style={{ fontSize: 10, color: '#666', letterSpacing: '0.08em', marginTop: 4, fontWeight: 500 }}>SYDNEY, AUSTRALIA</div>
            <div style={{
              marginTop: 12, paddingTop: 12, borderTop: '1px solid rgba(0,0,0,0.1)',
              fontSize: 11, fontWeight: 600, color: '#1E1E78', letterSpacing: '0.04em',
            }}>Cyber Skills Academy</div>
          </div>
          <div style={{
            marginTop: 24, fontSize: 14, fontWeight: 600, color: 'rgba(255,255,255,0.8)',
            textAlign: 'center', position: 'relative', zIndex: 1,
          }}>Global recognition.<br/>International standards.</div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { KPMGSection, MacquarieSection });