/* WhyAndCurriculum.jsx — Sections 5–6: FULLY RESPONSIVE */

const WhyDifferentSection = () => {
  const { isMobile } = useResponsive();
  const cards = [
    { title: 'Curriculum co-built with KPMG cyber experts', body: 'Designed alongside KPMG India\'s Cyber Consulting practice — every module maps to a live skill the industry hires for.' },
    { title: 'Globally-certified by Macquarie University', body: 'Earn a co-credential from Sydney\'s Cyber Skills Academy — recognised by employers across India, the UK, Australia, and the GCC.' },
    { title: 'Hands-on labs, not just lectures', body: 'Ethical hacking ranges, live SOC simulations, malware reverse-engineering, and network defence labs from semester three onward.' },
    { title: 'Industry certifications stacked into the degree', body: 'Exit ready for CompTIA Security+, CEH foundations, and entry-level cloud security certifications — no extra fee.' },
    { title: 'Internships and live capstone projects', body: 'Two mandatory internships and a final-year capstone solving a real industry brief — supervised by KPMG mentors.' },
    { title: 'Career paths into Cyber Forensics, GRC, and AI Defence', body: 'Specialisation tracks in cyber forensics, governance-risk-compliance, and AI-driven threat detection from semester five.' },
  ];

  return (
    <section id="why-different" style={{
      background: 'linear-gradient(150deg, #1E1E78 0%, #7A1F7C 100%)',
      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: 'rgba(255,255,255,0.6)', marginBottom: 12,
        }}>Why This Program</div>
        <h2 style={{
          fontSize: isMobile ? 28 : 44, fontWeight: 700, color: '#fff', lineHeight: 1.15,
          letterSpacing: '-0.02em', margin: '0 0 40px', maxWidth: 600,
        }}>
          Six things no other B.Tech in A.P. or Telangana offers.
        </h2>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 14 : 20,
        }}>
          {cards.map((c, i) => (
            <div key={i} style={{
              background: '#FBE4C4', borderRadius: 12, padding: isMobile ? '22px 20px' : '28px 24px',
            }}>
              <div style={{ width: 10, height: 10, background: '#E0231C', marginBottom: 14 }}></div>
              <h4 style={{
                fontSize: isMobile ? 15 : 16, fontWeight: 700, color: '#1E1E78',
                margin: '0 0 8px', lineHeight: 1.3,
              }}>{c.title}</h4>
              <p style={{
                fontSize: 13, color: '#4A4A4A', lineHeight: 1.6, margin: 0, fontWeight: 400,
              }}>{c.body}</p>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: isMobile ? 24 : 40, background: '#FBE4C4', borderRadius: 12,
          padding: isMobile ? '18px 20px' : '20px 28px',
          display: 'flex', flexDirection: isMobile ? 'column' : 'row',
          alignItems: isMobile ? 'stretch' : 'center',
          justifyContent: 'space-between', gap: isMobile ? 14 : 0,
        }}>
          <span style={{ fontSize: isMobile ? 15 : 16, fontWeight: 600, color: '#1A1A1A' }}>
            Want a counsellor to walk you through this?
          </span>
          <a href="tel:+918977780866" style={{
            padding: '12px 24px', borderRadius: 8,
            background: 'linear-gradient(90deg, #E0231C, #7A1F7C)',
            color: '#fff', fontSize: 14, fontWeight: 700,
            textDecoration: 'none', fontFamily: "'IBM Plex Sans', sans-serif",
            textAlign: 'center',
          }}>Book a 15-min call</a>
        </div>
      </div>
    </section>
  );
};

/* ── Section 6: Curriculum ───────────────────────────────────── */
const CurriculumSection = () => {
  const { isMobile } = useResponsive();
  const [activeYear, setActiveYear] = React.useState(0);

  const years = [
    {
      title: 'Year 1 — Foundations',
      semesters: [
        { name: 'Semester 1', subjects: ['Engineering Maths I', 'Programming with Python', 'Digital Logic', 'Communication Skills', 'Intro to Cyber Security'] },
        { name: 'Semester 2', subjects: ['Engineering Maths II', 'Data Structures', 'Computer Organisation', 'Discrete Mathematics', 'Linux & Shell Scripting'] },
      ],
    },
    {
      title: 'Year 2 — Core Computer Science',
      semesters: [
        { name: 'Semester 3', subjects: ['Operating Systems', 'Object-Oriented Programming (Java)', 'DBMS', 'Networks Fundamentals', { text: 'Cryptography I', tag: 'KPMG co-taught' }] },
        { name: 'Semester 4', subjects: ['Computer Networks', 'Software Engineering', 'Web Technologies', { text: 'Cryptography II', tag: null }, { text: 'Ethical Hacking Foundations', tag: 'Lab-heavy' }] },
      ],
    },
    {
      title: 'Year 3 — Applied Cyber Security',
      semesters: [
        { name: 'Semester 5', subjects: ['Information Security Management', { text: 'Network Security & Firewalls', tag: null }, 'Cloud Computing', { text: 'Cyber Forensics I', tag: null }, 'Elective Track Starts'] },
        { name: 'Semester 6', subjects: [{ text: 'AI in Cyber Defence', tag: null }, { text: 'SOC Operations & Incident Response', tag: 'KPMG-led' }, 'Mobile & IoT Security', { text: 'Industry Internship I', tag: '6 weeks' }] },
      ],
    },
    {
      title: 'Year 4 — Specialisation & Industry',
      semesters: [
        { name: 'Semester 7', subjects: [{ text: 'Governance, Risk & Compliance (GRC)', tag: 'KPMG-led' }, { text: 'Threat Intelligence & Red Teaming', tag: null }, { text: 'Capstone Project Phase I', tag: null }, 'Elective II'] },
        { name: 'Semester 8', subjects: [{ text: 'Capstone Project Phase II', tag: null }, { text: 'Industry Internship II', tag: '12 weeks' }, { text: 'Macquarie Certification Module', tag: null }, 'Career Bootcamp'] },
      ],
    },
  ];

  return (
    <section id="curriculum" 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,
        }}>What You'll Learn</div>
        <h2 style={{
          fontSize: isMobile ? 28 : 44, fontWeight: 700, color: '#1E1E78', lineHeight: 1.15,
          letterSpacing: '-0.02em', margin: '0 0 8px',
        }}>
          Four years. Eight semesters.{isMobile ? ' ' : <br/>}One career-ready cyber professional.
        </h2>
        <p style={{
          fontSize: isMobile ? 14 : 16, color: '#4A4A4A', margin: '0 0 32px', maxWidth: 640,
        }}>
          Each semester combines foundational engineering, applied cyber security, and live industry exposure.
        </p>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 260px',
          gap: isMobile ? 24 : 40,
        }}>
          <div>
            {/* Year tabs */}
            <div style={{
              display: 'flex', gap: 4, marginBottom: 24,
              overflowX: isMobile ? 'auto' : 'visible',
              WebkitOverflowScrolling: 'touch',
              paddingBottom: 4,
            }}>
              {years.map((y, i) => (
                <button key={i} onClick={() => setActiveYear(i)} style={{
                  padding: isMobile ? '9px 16px' : '10px 20px', borderRadius: 8,
                  border: 'none', cursor: 'pointer', whiteSpace: 'nowrap',
                  background: activeYear === i ? '#1E1E78' : '#F0F0F0',
                  color: activeYear === i ? '#fff' : '#4A4A4A',
                  fontSize: 13, fontWeight: 600, fontFamily: "'IBM Plex Sans', sans-serif",
                  transition: '0.2s ease', flexShrink: 0,
                }}>Year {i + 1}</button>
              ))}
            </div>

            <h3 style={{
              fontSize: isMobile ? 18 : 22, fontWeight: 700, color: '#1E1E78', margin: '0 0 20px',
            }}>{years[activeYear].title}</h3>

            <div style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
              gap: isMobile ? 14 : 24,
            }}>
              {years[activeYear].semesters.map((sem, si) => (
                <div key={si} style={{
                  background: '#F7F8FA', borderRadius: 12, padding: isMobile ? '18px' : '20px 24px',
                }}>
                  <div style={{
                    fontSize: 12, fontWeight: 600, color: '#E0231C',
                    letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 12,
                  }}>{sem.name}</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {sem.subjects.map((subj, j) => {
                      const text = typeof subj === 'string' ? subj : subj.text;
                      const tag = typeof subj === 'string' ? null : subj.tag;
                      const isBold = typeof subj !== 'string';
                      return (
                        <div key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
                          <div style={{
                            width: 6, height: 6, flexShrink: 0, marginTop: 6,
                            background: isBold ? '#E0231C' : '#1E1E78',
                          }}></div>
                          <div>
                            <span style={{ fontSize: 13, fontWeight: isBold ? 700 : 500, color: '#1A1A1A' }}>{text}</span>
                            {tag && <span style={{ fontSize: 10, fontWeight: 600, color: '#F37021', marginLeft: 6, fontStyle: 'italic' }}>({tag})</span>}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Sidebar: Download CTA */}
          <div style={{
            position: isMobile ? 'relative' : 'sticky',
            top: isMobile ? 'auto' : 100, alignSelf: 'start',
            background: '#FBE4C4', borderRadius: 14, padding: isMobile ? '24px 20px' : '28px 24px',
            textAlign: 'center',
          }}>
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#1E1E78" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginBottom: 12 }}>
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><polyline points="9 15 12 18 15 15"/>
            </svg>
            <h4 style={{ fontSize: 16, fontWeight: 700, color: '#1E1E78', margin: '0 0 8px' }}>
              Download detailed syllabus PDF
            </h4>
            <p style={{ fontSize: 12, color: '#4A4A4A', margin: '0 0 16px', lineHeight: 1.5 }}>
              Get the full semester-by-semester breakdown with module descriptions.
            </p>
            <a
  href="/Folder - A3 - 02.pdf"
  download="A3-02.pdf"
  target="_blank"
  rel="noopener noreferrer"
  style={{
    display: 'block',
    width: '100%',
    padding: '12px',
    borderRadius: 8,
    border: 'none',
    background: 'linear-gradient(90deg, #E0231C, #7A1F7C)',
    color: '#fff',
    fontSize: 14,
    fontWeight: 700,
    cursor: 'pointer',
    fontFamily: "'IBM Plex Sans', sans-serif",
    textDecoration: 'none',
    textAlign: 'center',
    boxSizing: 'border-box',
  }}
>
  Download Syllabus
</a>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { WhyDifferentSection, CurriculumSection });