/* FaqCtaFooter.jsx — Sections 15–17: FULLY RESPONSIVE */

const FAQSection = () => {
  const { isMobile } = useResponsive();
  const [openIndex, setOpenIndex] = React.useState(0);

  const faqs = [
    { q: 'Is this an actual B.Tech degree, or just a certificate course?', a: 'This is a full 4-year B.Tech degree in Computer Science & Engineering (Cyber Security), awarded by Godavari Global University — a UGC-recognised, NAAC A++ accredited university. The KPMG and Macquarie credentials are additional, not substitutes.' },
    { q: 'What is GGU\'s accreditation?', a: 'GGU holds NAAC A++ accreditation in its 3rd cycle, is NIRF-ranked in the 201–300 band for six consecutive years, and is the No. 1 private university in A.P. as rated by Outlook.' },
    { q: 'What does "co-created with KPMG" actually mean?', a: 'The cyber security curriculum was designed jointly with KPMG India\'s Cyber Consulting practice. KPMG senior practitioners deliver masterclasses, mentor capstone projects, and provide live industry briefs through the four years.' },
    { q: 'What is the Macquarie University credential?', a: 'Students earn a co-credential from Macquarie University Sydney\'s Cyber Skills Academy alongside their B.Tech degree — a globally recognised signal of international-standard cyber training.' },
    { q: 'Are placements guaranteed?', a: 'No reputable university can guarantee placements — and anyone who does should be questioned. What we can guarantee: a curriculum mapped to where the industry hires, mentorship from KPMG, dedicated placement support, and an alumni network across major cyber recruiters.' },
    { q: 'What are the eligibility criteria?', a: '10+2 with Physics, Chemistry, and Mathematics, minimum 60% aggregate. We accept AP EAPCET, TS EAMCET, JEE Main scores, or our own entrance assessment.' },
    { q: 'Is the ₹4.0 LPA fee inclusive of everything?', a: 'The ₹4.0 LPA covers tuition, lab access, industry certifications, KPMG-led modules, and the Macquarie credential. Hostel, mess, transport, and examination charges are separate.' },
    { q: 'Are scholarships available?', a: 'Yes — merit-based scholarships for top entrance scorers and need-based assistance through bank tie-ups. Counsellors share full details on request.' },
    { q: 'Where is the campus and what\'s it like?', a: 'The campus is in Rajamahendravaram, Andhra Pradesh — fully residential, with dedicated cyber labs, a SOC environment, and full student amenities.' },
  ];

  return (
    <section id="faq" style={{
      background: '#F7F8FA', 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 }}>Frequently Asked Questions</div>
        <h2 style={{
          fontSize: isMobile ? 28 : 44, fontWeight: 700, color: '#1E1E78', lineHeight: 1.15,
          letterSpacing: '-0.02em', margin: '0 0 36px',
        }}>Your questions, answered.</h2>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 300px',
          gap: isMobile ? 28 : 40, alignItems: 'start',
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {faqs.map((f, i) => (
              <div key={i} style={{ borderBottom: '1px solid #e0e0e0' }}>
                <button onClick={() => setOpenIndex(openIndex === i ? -1 : i)} style={{
                  width: '100%', padding: isMobile ? '16px 0' : '18px 0', border: 'none', background: 'none',
                  cursor: 'pointer', display: 'flex', justifyContent: 'space-between',
                  alignItems: 'flex-start', gap: 12, textAlign: 'left',
                  fontFamily: "'IBM Plex Sans', sans-serif",
                }}>
                  <span style={{
                    fontSize: isMobile ? 14 : 15, fontWeight: 600,
                    color: openIndex === i ? '#1E1E78' : '#1A1A1A', lineHeight: 1.4,
                  }}>{f.q}</span>
                  <span style={{
                    fontSize: 20, color: '#8A8A8A', flexShrink: 0, lineHeight: 1,
                    transform: openIndex === i ? 'rotate(45deg)' : 'rotate(0)',
                    transition: '0.2s ease',
                  }}>+</span>
                </button>
                {openIndex === i && (
                  <div style={{
                    padding: '0 0 16px', fontSize: isMobile ? 13 : 14,
                    color: '#4A4A4A', lineHeight: 1.7,
                  }}>{f.a}</div>
                )}
              </div>
            ))}
          </div>

          {/* Support card */}
          <div style={{
            background: '#FBE4C4', borderRadius: 16,
            padding: isMobile ? '24px 20px' : '28px 24px',
            position: isMobile ? 'relative' : 'sticky', top: isMobile ? 'auto' : 100,
          }}>
            <h4 style={{ fontSize: 18, fontWeight: 700, color: '#1E1E78', margin: '0 0 6px' }}>Still have questions?</h4>
            <p style={{ fontSize: 13, color: '#4A4A4A', margin: '0 0 16px', lineHeight: 1.5 }}>
              Talk to a counsellor — they'll spend as long as you need.
            </p>
            <div style={{ fontSize: 22, fontWeight: 700, color: '#1E1E78', marginBottom: 16 }}>+91 89777 80866</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <a href="tel:+918977780866" style={{
                display: 'block', padding: '12px', borderRadius: 8, textAlign: 'center',
                background: 'linear-gradient(90deg, #E0231C, #7A1F7C)',
                color: '#fff', fontSize: 14, fontWeight: 700, textDecoration: 'none',
              }}>Call Now</a>
              <a href="https://wa.me/918977780866?text=Hi%2C%20I%27d%20like%20to%20know%20about%20the%20B.Tech%20Cyber%20Security%20program%20at%20GGU." target="_blank" rel="noopener" style={{
                display: 'block', padding: '12px', borderRadius: 8, textAlign: 'center',
                background: '#25D366', color: '#fff', fontSize: 14, fontWeight: 700, textDecoration: 'none',
              }}>WhatsApp Us</a>
            </div>
            <p style={{ fontSize: 11, color: '#8A8A8A', textAlign: 'center', marginTop: 12, marginBottom: 0 }}>
              Mon–Sat · 9:30 AM to 7:00 PM IST
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

const FinalCTASection = () => {
  const { isMobile } = useResponsive();
  return (
    <section id="final-cta" style={{
      background: 'linear-gradient(135deg, #1E1E78 0%, #7A1F7C 50%, #E0231C 100%)',
      padding: isMobile ? '64px 20px' : '96px 40px', textAlign: 'center',
      fontFamily: "'IBM Plex Sans', sans-serif",
    }}>
      <div style={{ maxWidth: 700, margin: '0 auto' }}>
        <h2 style={{
          fontSize: isMobile ? 32 : 56, fontWeight: 700, color: '#fff', lineHeight: 1.1,
          letterSpacing: '-0.02em', margin: '0 0 16px',
        }}>Your future is in play, now.</h2>
        <p style={{
          fontSize: isMobile ? 16 : 20, color: 'rgba(255,255,255,0.85)', lineHeight: 1.6,
          margin: '0 0 32px',
        }}>
          60 seats. One first-of-its-kind program. A career built with KPMG and credentialed globally. Apply before the cohort closes.
        </p>
        <div style={{
          display: 'flex', gap: 12, justifyContent: 'center',
          flexDirection: isMobile ? 'column' : 'row',
          marginBottom: 24,
        }}>
          <a href="#apply" style={{
            padding: isMobile ? '14px 24px' : '16px 32px', borderRadius: 8,
            background: '#fff', color: '#1E1E78', fontSize: isMobile ? 15 : 17,
            fontWeight: 700, textDecoration: 'none', fontFamily: "'IBM Plex Sans', sans-serif",
            textAlign: 'center',
          }}>Apply Now</a>
          <a href="tel:+918977780866" style={{
            padding: isMobile ? '13px 23px' : '15px 31px', borderRadius: 8,
            background: 'transparent', border: '2px solid rgba(255,255,255,0.5)',
            color: '#fff', fontSize: isMobile ? 15 : 17, fontWeight: 600,
            textDecoration: 'none', fontFamily: "'IBM Plex Sans', sans-serif",
            textAlign: 'center',
          }}>Talk to a Counsellor</a>
        </div>
        <p style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.02em' }}>
          NAAC A++ · KPMG in India · Macquarie University Sydney · 1st Time in A.P. & Telangana
        </p>
      </div>
    </section>
  );
};

const LPFooter = () => {
  const { isMobile } = useResponsive();
  const cols = [
    { title: 'GGU', items: ['Godavari Global University', 'Rajamahendravaram, A.P., India', '+91 89777 80866', 'admissions@ggu.edu.in'] },
    { title: 'Programs', items: ['B.Tech CSE (Cyber Security)', 'B.Tech CSE (AI & ML) — IBM', 'B.Tech CSE (Data Science) — IBM', 'Other Programs at GGU'] },
    { title: 'Resources', items: ['Download Brochure', 'Fee Structure', 'Scholarships', 'Hostel & Campus', 'Admissions FAQ'] },
    { title: 'About', items: ['About GGU', 'Accreditations', 'Industry Partners', 'Careers at GGU', 'Contact'] },
  ];

  return (
    <footer style={{
      background: '#0D0D2B', padding: isMobile ? '40px 20px 20px' : '56px 40px 24px',
      fontFamily: "'IBM Plex Sans', sans-serif",
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
          gap: isMobile ? 24 : 40, marginBottom: isMobile ? 28 : 40,
        }}>
          {cols.map((c, i) => (
            <div key={i}>
              <h4 style={{ fontSize: 13, fontWeight: 700, color: '#fff', marginBottom: 12 }}>{c.title}</h4>
              {c.items.map((item, j) => (
                <div key={j} style={{
                  fontSize: isMobile ? 11 : 12, color: 'rgba(255,255,255,0.6)',
                  lineHeight: 2.2, cursor: 'pointer',
                }}>{item}</div>
              ))}
            </div>
          ))}
        </div>
        <div style={{
          borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 16,
          display: 'flex', flexDirection: isMobile ? 'column' : 'row',
          justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'center',
          gap: isMobile ? 12 : 0,
        }}>
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)' }}>
            © 2026 Godavari Global University. All rights reserved.
          </div>
          <div style={{ display: 'flex', gap: 16, fontSize: 11, color: 'rgba(255,255,255,0.4)', flexWrap: 'wrap' }}>
            <span>Privacy Policy</span>
            <span>Terms</span>
            <span>Refund Policy</span>
          </div>
        </div>
      </div>
    </footer>
  );
};

const WhatsAppBubble = () => (
  <a href="https://wa.me/918977780866?text=Hi%2C%20I%27d%20like%20to%20know%20about%20the%20B.Tech%20Cyber%20Security%20program%20at%20GGU." target="_blank" rel="noopener" style={{
    position: 'fixed', bottom: 24, right: 24, zIndex: 999,
    width: 56, height: 56, borderRadius: '50%', background: '#25D366',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    boxShadow: '0 4px 16px rgba(0,0,0,0.2)', textDecoration: 'none',
  }}>
    <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.127.556 4.126 1.527 5.86L.058 23.708l5.97-1.565A11.94 11.94 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-1.903 0-3.727-.522-5.313-1.51l-.381-.227-3.546.93.948-3.462-.249-.396A9.77 9.77 0 0 1 2.182 12 9.818 9.818 0 1 1 12 21.818z"/></svg>
  </a>
);

Object.assign(window, { FAQSection, FinalCTASection, LPFooter, WhatsAppBubble });