// mm-sections-2.jsx — WhyChoose, HowItWorks, Tutor, Results, Testimonials, FAQ, CTA, Footer

const { Button, Card, Badge, Footer: DSFooter } = window.MathMentorDesignSystem_e84fdd;

function WhyChooseSection() {
  const features = [
    { icon: "🎓", color: "#7c3aed", bg: "#f5f3ff", title: "Expert Mathematics Tutors",   body: "Qualified educators with deep subject mastery and years of international experience across IB, IGCSE, JEE, and SAT." },
    { icon: "🧠", color: "#0075de", bg: "#eff6ff", title: "Personalized Learning Plans", body: "Every student gets a custom roadmap built around their curriculum, current level, learning style, and exam targets." },
    { icon: "👨‍🏫", color: "#0d9488", bg: "#f0fdfa", title: "One-to-One Attention",        body: "Every session is 100% focused on your child — no distractions, complete personal attention from the tutor." },
    { icon: "📚", color: "#213183", bg: "#eef2ff", title: "Curriculum Experts",           body: "Deep knowledge of IB, IGCSE, USA Common Core, Australian, Canadian, and CBSE mathematics requirements." },
    { icon: "📈", color: "#ea580c", bg: "#fff7ed", title: "Progress Tracking",            body: "Monthly assessments and detailed reports so you always know where your child stands and what's improving." },
    { icon: "👨‍👩‍👧", color: "#16a34a", bg: "#f0fdf4", title: "Parent Communication",       body: "Transparent feedback — parents receive regular progress updates, strengths, and areas of focus after sessions." },
  ];

  const badges = [
    { icon: "⭐", text: "Rated 4.9/5 by Parents" },
    { icon: "🌍", text: "15+ Countries" },
    { icon: "🎓", text: "5,000+ Students Taught" },
    { icon: "📅", text: "14+ Years Experience" },
  ];

  return (
    <section style={{ background: "linear-gradient(135deg, #f5f3ff 0%, #ede9fe 35%, #f8f7ff 70%, #eef2ff 100%)", padding: "88px 48px", position: "relative", overflow: "hidden" }}>
      {/* Soft background blobs */}
      <div aria-hidden="true" style={{ position:"absolute", top:-120, right:-120, width:400, height:400, borderRadius:"50%", background:"radial-gradient(circle, rgba(139,92,246,0.10) 0%, transparent 70%)", pointerEvents:"none" }} />
      <div aria-hidden="true" style={{ position:"absolute", bottom:-80, left:-80, width:320, height:320, borderRadius:"50%", background:"radial-gradient(circle, rgba(79,70,229,0.08) 0%, transparent 70%)", pointerEvents:"none" }} />

      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", position: "relative", zIndex: 1 }}>

        {/* Header */}
        <div style={{ textAlign: "center", marginBottom: 44 }}>
          <Badge>Why MathMentor</Badge>
          <h2 style={{ margin: "16px 0 16px", fontSize: "clamp(28px,3.5vw,46px)", fontWeight: 800, color: "var(--ink-95)", letterSpacing: "-1.5px", lineHeight: 1.1, fontFamily: "var(--font-sans)" }}>
            Trusted by Parents.{" "}
            <span style={{ background: "linear-gradient(90deg, #7c3aed 0%, #4f46e5 100%)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text", MozBackgroundClip: "text" }}>Loved by Students.</span>
          </h2>
          <p style={{ margin: "0 auto 28px", fontSize: 17, color: "var(--ink-muted)", maxWidth: 620, lineHeight: 1.65 }}>
            From IB and IGCSE to SAT, JEE, ACT, and global school curriculums, MathMentor combines expert guidance, personalized learning, and measurable progress to help every student succeed with confidence.
          </p>
          {/* Trust badges */}
          <div style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" }}>
            {badges.map(b => (
              <div key={b.text} style={{ display: "inline-flex", alignItems: "center", gap: 7, background: "#fff", border: "1px solid rgba(124,58,237,0.15)", borderRadius: "var(--rounded-full)", padding: "6px 16px", fontSize: 13, fontWeight: 600, color: "var(--ink-secondary)", boxShadow: "0 2px 8px rgba(124,58,237,0.08)" }}>
                <span style={{ fontSize: 15 }}>{b.icon}</span>{b.text}
              </div>
            ))}
          </div>
        </div>

        {/* Feature cards — full width 3-column */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {features.map(f => (
            <div key={f.title}
              style={{ background: "#fff", borderRadius: 20, padding: "26px 22px", boxShadow: "0 4px 20px rgba(0,0,0,0.06)", border: "1px solid rgba(0,0,0,0.05)", transition: "transform 200ms ease, box-shadow 200ms ease", cursor: "default" }}
              onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-5px)"; e.currentTarget.style.boxShadow = "0 16px 40px rgba(124,58,237,0.13)"; }}
              onMouseLeave={e => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "0 4px 20px rgba(0,0,0,0.06)"; }}
            >
              <div style={{ width: 48, height: 48, borderRadius: 14, background: f.bg, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 24, marginBottom: 16 }}>{f.icon}</div>
              <h3 style={{ margin: "0 0 10px", fontSize: 17, fontWeight: 700, color: "var(--ink-95)", letterSpacing: "-0.3px", lineHeight: 1.3 }}>{f.title}</h3>
              <p style={{ margin: 0, fontSize: 14, color: "var(--ink-muted)", lineHeight: 1.65 }}>{f.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorksSection() {
  const steps = [
    {
      num: "01", icon: "📅",
      grad: "linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%)",
      glow: "rgba(124,58,237,0.15)",
      title: "Book Your Free Assessment",
      body: "Choose a convenient time for a free online assessment where we understand your child's goals, curriculum, and learning needs.",
    },
    {
      num: "02", icon: "🧠",
      grad: "linear-gradient(135deg, #0075de 0%, #0ea5e9 100%)",
      glow: "rgba(0,117,222,0.13)",
      title: "Personalized Skill Assessment",
      body: "We evaluate current understanding, identify learning gaps, and determine the best strategy for long-term success.",
    },
    {
      num: "03", icon: "📚",
      grad: "linear-gradient(135deg, #0d9488 0%, #10b981 100%)",
      glow: "rgba(13,148,136,0.13)",
      title: "Customized Learning Plan",
      body: "Receive a personalized learning plan designed around your child's curriculum, pace, strengths, and academic goals.",
    },
    {
      num: "04", icon: "📈",
      grad: "linear-gradient(135deg, #16a34a 0%, #84cc16 100%)",
      glow: "rgba(22,163,74,0.13)",
      title: "Learn, Track & Excel",
      body: "Attend regular live sessions, receive progress reports, parent updates, and continuous academic support.",
    },
  ];

  const trustBadges = [
    { icon: "⭐", text: "5,000+ Students Mentored" },
    { icon: "🌍", text: "Students Across 15+ Countries" },
    { icon: "👨‍🏫", text: "14+ Years Teaching Experience" },
    { icon: "📈", text: "Personalized Learning Plans" },
  ];

  return (
    <section id="how-it-works" style={{ background: "#fff", padding: "88px 48px", position: "relative", overflow: "hidden" }}>
      {/* Subtle background math symbols */}
      <div aria-hidden="true" style={{ position: "absolute", top: 20, right: 60, fontSize: 80, color: "rgba(124,58,237,0.04)", fontFamily: "Georgia, serif", pointerEvents: "none", userSelect: "none" }}>∑</div>
      <div aria-hidden="true" style={{ position: "absolute", bottom: 40, left: 40, fontSize: 64, color: "rgba(0,117,222,0.04)", fontFamily: "Georgia, serif", pointerEvents: "none", userSelect: "none" }}>∫</div>
      <div aria-hidden="true" style={{ position: "absolute", top: "40%", left: 20, fontSize: 48, color: "rgba(13,148,136,0.04)", fontFamily: "Georgia, serif", pointerEvents: "none", userSelect: "none" }}>π</div>

      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", position: "relative", zIndex: 1 }}>

        {/* Header */}
        <div style={{ textAlign: "center", marginBottom: 60 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 7, background: "rgba(124,58,237,0.07)", border: "1px solid rgba(124,58,237,0.15)", borderRadius: "var(--rounded-full)", padding: "5px 16px", marginBottom: 18, fontSize: 13, fontWeight: 600, color: "#7c3aed" }}>
            ✨ Simple Learning Journey
          </div>
          <h2 style={{ margin: "0 0 16px", fontSize: "clamp(26px,3.2vw,42px)", fontWeight: 800, color: "var(--ink-95)", letterSpacing: "-1.5px", lineHeight: 1.1, fontFamily: "var(--font-sans)" }}>
            Your Child's Journey to<br />
            <span style={{ background: "linear-gradient(90deg, #7c3aed 0%, #0075de 100%)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text", MozBackgroundClip: "text" }}>Mathematics Success</span>
          </h2>
          <p style={{ margin: "0 auto", fontSize: 16, color: "var(--ink-muted)", maxWidth: 560, lineHeight: 1.7 }}>
            Our <strong style={{ color: "var(--primary)", fontWeight: 600 }}>personalized</strong> learning process is designed to understand your child's needs, create a tailored roadmap, and deliver <strong style={{ color: "var(--primary)", fontWeight: 600 }}>measurable progress</strong> through expert <strong style={{ color: "var(--primary)", fontWeight: 600 }}>one-to-one</strong> mathematics tutoring.
          </p>
        </div>

        {/* Step cards with gradient connectors */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, marginBottom: 56, position: "relative" }}>
          {/* Gradient connector line */}
          <div aria-hidden="true" style={{ position: "absolute", top: 40, left: "12.5%", right: "12.5%", height: 3, background: "linear-gradient(90deg, #7c3aed 0%, #0075de 33%, #0d9488 66%, #16a34a 100%)", borderRadius: 99, zIndex: 0, opacity: 0.25 }} />

          {steps.map((s, i) => (
            <div key={s.num} style={{ padding: "0 10px", position: "relative", zIndex: 1 }}>
              <div
                style={{ background: "#fff", borderRadius: 22, border: "1px solid rgba(0,0,0,0.06)", boxShadow: "0 4px 20px rgba(0,0,0,0.06)", padding: "28px 22px 26px", height: "100%", transition: "transform 200ms ease, box-shadow 200ms ease", cursor: "default" }}
                onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-6px)"; e.currentTarget.style.boxShadow = `0 20px 48px ${s.glow}, 0 4px 16px rgba(0,0,0,0.06)`; }}
                onMouseLeave={e => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "0 4px 20px rgba(0,0,0,0.06)"; }}
              >
                {/* Icon circle */}
                <div style={{ width: 64, height: 64, borderRadius: "50%", background: s.grad, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 20, fontSize: 26, boxShadow: `0 8px 24px ${s.glow}`, position: "relative" }}>
                  {s.icon}
                  {/* Step number badge */}
                  <div style={{ position: "absolute", top: -6, right: -6, width: 22, height: 22, borderRadius: "50%", background: "#fff", border: "2px solid rgba(0,0,0,0.08)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 10, fontWeight: 800, color: "var(--ink-secondary)" }}>{i+1}</div>
                </div>

                <h3 style={{ margin: "0 0 10px", fontSize: 16, fontWeight: 700, color: "var(--ink-95)", letterSpacing: "-0.3px", lineHeight: 1.25 }}>{s.title}</h3>
                <p style={{ margin: 0, fontSize: 14, color: "var(--ink-muted)", lineHeight: 1.65 }}>{s.body}</p>
              </div>
            </div>
          ))}
        </div>

        {/* Trust badges */}
        <div style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap", marginBottom: 56 }}>
          {trustBadges.map(b => (
            <div key={b.text} style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "var(--canvas-soft)", border: "1px solid var(--hairline)", borderRadius: "var(--rounded-full)", padding: "8px 18px", fontSize: 13, fontWeight: 600, color: "var(--ink-secondary)" }}>
              <span style={{ fontSize: 15 }}>{b.icon}</span>{b.text}
            </div>
          ))}
        </div>

        {/* Bottom CTA block */}
        <div style={{ background: "linear-gradient(135deg, #f5f3ff 0%, #eef2ff 100%)", borderRadius: 24, padding: "48px 40px", textAlign: "center", border: "1px solid rgba(124,58,237,0.10)" }}>
          <h3 style={{ margin: "0 0 12px", fontSize: "clamp(20px,2.5vw,30px)", fontWeight: 800, color: "var(--ink-95)", letterSpacing: "-0.8px", fontFamily: "var(--font-sans)" }}>
            Ready to Begin Your Child's Mathematics Success Journey?
          </h3>
          <p style={{ margin: "0 auto 28px", fontSize: 15, color: "var(--ink-muted)", maxWidth: 480, lineHeight: 1.65 }}>
            Book a free assessment today and discover how personalized mathematics tutoring can help your child gain confidence, improve grades, and achieve academic excellence.
          </p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" onClick={() => window.__mmBook?.()}>Book Free Assessment</Button>
            <button onClick={() => window.__mmBook?.()} style={{ padding: "12px 24px", background: "#fff", border: "1px solid rgba(124,58,237,0.25)", borderRadius: "var(--rounded-full)", fontSize: 15, fontWeight: 600, color: "#7c3aed", cursor: "pointer", fontFamily: "var(--font-sans)" }}>Talk to an Expert →</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function TutorSection() {
  const achievements = [
    { icon: "🎓", label: "Qualifications",       value: "B.Tech · M.Tech" },
    { icon: "🌍", label: "Teaching Experience",  value: "14+ Years" },
    { icon: "👨‍🎓", label: "Students Mentored",   value: "5,000+ Worldwide" },
    { icon: "🌎", label: "Countries Served",      value: "USA · Canada · Australia · UAE · HK · SG · India" },
    { icon: "📚", label: "Expertise",             value: "IB · IGCSE · ACT · SAT · CBSE · IIT JEE · GATE" },
    { icon: "💡", label: "Teaching Philosophy",  value: "Concept First · Confidence Always" },
  ];

  return (
    <section id="about" style={{ background: "linear-gradient(135deg, #f8faff 0%, #eef2ff 40%, #f5f3ff 100%)", padding: "88px 48px", position: "relative", overflow: "hidden" }}>
      {/* Background blobs */}
      <div aria-hidden="true" style={{ position:"absolute", top:-100, right:-100, width:380, height:380, borderRadius:"50%", background:"radial-gradient(circle, rgba(79,70,229,0.08) 0%, transparent 70%)", pointerEvents:"none" }} />
      <div aria-hidden="true" style={{ position:"absolute", bottom:-80, left:-80, width:300, height:300, borderRadius:"50%", background:"radial-gradient(circle, rgba(124,58,237,0.07) 0%, transparent 70%)", pointerEvents:"none" }} />

      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", position: "relative", zIndex: 1 }}>

        {/* Section header */}
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <Badge>Meet Your Mentor</Badge>
          <h2 style={{ margin: "16px 0 0", fontSize: "clamp(26px,3.2vw,42px)", fontWeight: 800, color: "var(--ink-95)", letterSpacing: "-1.5px", lineHeight: 1.1, fontFamily: "var(--font-sans)" }}>
            Meet the Mentor <span style={{ background: "linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text", MozBackgroundClip: "text" }}>Behind MathMentor</span>
          </h2>
        </div>

        {/* Two-column body */}
        <div className="tutor-grid" style={{ display: "grid", gridTemplateColumns: "380px 1fr", gap: 60, alignItems: "start" }}>

          {/* LEFT — photo + floating badges */}
          <div style={{ position: "relative" }}>
            {/* Floating badge — top left */}
            <div style={{ position: "absolute", top: -16, left: -16, zIndex: 10, background: "#fff", borderRadius: 14, padding: "10px 16px", boxShadow: "0 8px 28px rgba(79,70,229,0.14)", border: "1px solid rgba(79,70,229,0.10)" }}>
              <div style={{ fontSize: 10, fontWeight: 700, color: "#4f46e5", textTransform: "uppercase", letterSpacing: "0.5px", marginBottom: 2 }}>Experience</div>
              <div style={{ fontSize: 20, fontWeight: 800, color: "var(--ink-95)", letterSpacing: "-0.5px" }}>14+ Years</div>
            </div>
            {/* Floating badge — bottom right */}
            <div style={{ position: "absolute", bottom: -16, right: -16, zIndex: 10, background: "#fff", borderRadius: 14, padding: "10px 16px", boxShadow: "0 8px 28px rgba(124,58,237,0.14)", border: "1px solid rgba(124,58,237,0.10)" }}>
              <div style={{ fontSize: 10, fontWeight: 700, color: "#7c3aed", textTransform: "uppercase", letterSpacing: "0.5px", marginBottom: 2 }}>Students Mentored</div>
              <div style={{ fontSize: 20, fontWeight: 800, color: "var(--ink-95)", letterSpacing: "-0.5px" }}>5,000+</div>
            </div>
            {/* Floating badge — bottom left */}
            <div style={{ position: "absolute", bottom: 60, left: -20, zIndex: 10, background: "#fff", borderRadius: 14, padding: "9px 14px", boxShadow: "0 6px 20px rgba(0,0,0,0.10)", border: "1px solid rgba(0,0,0,0.06)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#22c55e", boxShadow: "0 0 6px #22c55e" }}></span>
                <span style={{ fontSize: 12, fontWeight: 700, color: "var(--ink-secondary)" }}>Trusted Worldwide</span>
              </div>
            </div>
            {/* Photo card */}
            <div style={{ borderRadius: 24, overflow: "hidden", boxShadow: "0 32px 80px rgba(79,70,229,0.16), 0 4px 16px rgba(0,0,0,0.08)", border: "2px solid rgba(255,255,255,0.8)" }}>
              <img loading="lazy" decoding="async" src="uploads/tutor-sm.png" alt="Er. Jayesh Rawat — JK Sir" style={{ width: "100%", display: "block", objectFit: "cover" }} />
            </div>
          </div>

          {/* RIGHT — bio + cards + CTAs */}
          <div>
            {/* Qualification badge */}
            <div style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "rgba(79,70,229,0.07)", border: "1px solid rgba(79,70,229,0.15)", borderRadius: "var(--rounded-full)", padding: "6px 18px", marginBottom: 18, fontSize: 13, fontWeight: 600, color: "#4f46e5" }}>
              B.Tech · M.Tech · 14+ Years of Global Teaching Experience
            </div>

            {/* Name */}
            <h3 style={{ margin: "0 0 4px", fontSize: "clamp(30px,3vw,44px)", fontWeight: 800, color: "var(--ink-95)", letterSpacing: "-1.8px", lineHeight: 1.05, fontFamily: "var(--font-sans)" }}>Er. Jayesh Rawat</h3>
            <p style={{ margin: "0 0 4px", fontSize: 13, color: "var(--ink-faint)", fontWeight: 500 }}>Widely known as JK Sir</p>
            <p style={{ margin: "0 0 24px", fontSize: 15, color: "#4f46e5", fontWeight: 700 }}>Founder &amp; Lead Mathematics Educator, MathMentor</p>

            {/* Bio */}
            <div style={{ marginBottom: 28 }}>
              {[
                "For over 14 years, I have been helping students from the USA, Canada, Australia, UAE, Hong Kong, Singapore, and India build strong mathematical foundations and achieve academic excellence.",
                "My teaching philosophy is simple — every student can excel in mathematics with the right guidance, personalized learning approach, and consistent practice.",
                "Whether preparing for IB, IGCSE, SAT, IIT JEE, GATE, or ACT, my focus is always on developing conceptual clarity, analytical thinking, and confidence — not memorization.",
              ].map((para, i) => (
                <p key={i} style={{ margin: "0 0 12px", fontSize: 15, color: "var(--ink-muted)", lineHeight: 1.7 }}>{para}</p>
              ))}
            </div>

            {/* Achievement cards */}
            <div className="achieve-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 28 }}>
              {achievements.map(a => (
                <div key={a.label}
                  style={{ background: "#fff", borderRadius: 16, padding: "14px 16px", boxShadow: "0 2px 12px rgba(0,0,0,0.06)", border: "1px solid rgba(0,0,0,0.05)", display: "flex", gap: 12, alignItems: "flex-start", transition: "transform 180ms ease, box-shadow 180ms ease" }}
                  onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-3px)"; e.currentTarget.style.boxShadow = "0 8px 24px rgba(79,70,229,0.12)"; }}
                  onMouseLeave={e => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "0 2px 12px rgba(0,0,0,0.06)"; }}
                >
                  <span style={{ fontSize: 22, flexShrink: 0, lineHeight: 1.2 }}>{a.icon}</span>
                  <div>
                    <div style={{ fontSize: 10, fontWeight: 700, color: "var(--ink-faint)", textTransform: "uppercase", letterSpacing: "0.5px", marginBottom: 3 }}>{a.label}</div>
                    <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-95)", lineHeight: 1.4 }}>{a.value}</div>
                  </div>
                </div>
              ))}
            </div>

            {/* CTAs */}
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <Button variant="primary" size="lg" onClick={() => window.__mmBook?.()}>Book a Free Assessment</Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ResultsSection() {
  const results = [
    {
      img: "uploads/WhatsApp Image 2026-06-22 at 10.00.34 AM.jpeg",
      alt: "Vanisha Kumawat — CBSE XII 2026 Mathematics 91/100",
    },
    {
      img: "uploads/WhatsApp Image 2026-06-22 at 10.00.35 AM.jpeg",
      alt: "Priyasha — CBSE XII 2026 Applied Mathematics 87/100",
    },
    {
      img: "uploads/WhatsApp Image 2026-06-22 at 10.00.53 AM.jpeg",
      alt: "Shubh Gupta — JEE Main 2026 Mathematics 98.90 percentile",
    },
  ];
  return (
    <section style={{ background: "var(--canvas-soft)", padding: "80px 32px" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 52 }}>
          <Badge>Student Achievements</Badge>
          <h2 className="mm-heading-1" style={{ margin: "14px 0 12px", color: "var(--ink-95)" }}>Our Star Achievers</h2>
          <p style={{ margin: "0 auto", fontSize: 16, color: "var(--ink-muted)", maxWidth: 480, lineHeight: 1.55 }}>Real results from real students — this is what focused, personalized tutoring achieves.</p>
        </div>
        <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {results.map(r => (
            <Card key={r.alt} variant="elevated" padding="0" style={{ overflow: "hidden" }}>
              <img loading="lazy" decoding="async" src={r.img} alt={r.alt} style={{ width: "100%", display: "block" }} />
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function AppDownloadSection() {
  const APP_LINK = "https://clpdiy4.page.link/G24W";
  const features = [
    { icon: "🎥", label: "Live Interactive Classes" },
    { icon: "📚", label: "Recorded Video Library" },
    { icon: "📝", label: "Practice Tests" },
    { icon: "📈", label: "Progress Tracking" },
    { icon: "📄", label: "Study Material & Notes" },
    { icon: "💬", label: "Instant Doubt Support" },
    { icon: "🔔", label: "Assignment Reminders" },
    { icon: "🌍", label: "Learn Anytime, Anywhere" },
  ];
  const stats = [
    { icon: "⭐", text: "Trusted by 5,000+ Students" },
    { icon: "🌍", text: "Used Across 15+ Countries" },
    { icon: "📱", text: "Mobile, Tablet & Desktop" },
    { icon: "🔒", text: "Secure Learning Platform" },
  ];

  return (
    <section id="app-download" style={{ background: "#fff", padding: "88px 48px", position: "relative", overflow: "hidden" }}>
      {/* BG blobs */}
      <div aria-hidden="true" style={{ position:"absolute", top:-80, right:-60, width:380, height:380, borderRadius:"50%", background:"radial-gradient(circle, rgba(124,58,237,0.07) 0%, transparent 70%)", pointerEvents:"none" }} />
      <div aria-hidden="true" style={{ position:"absolute", bottom:-60, left:-60, width:300, height:300, borderRadius:"50%", background:"radial-gradient(circle, rgba(79,70,229,0.06) 0%, transparent 70%)", pointerEvents:"none" }} />
      <div aria-hidden="true" style={{ position:"absolute", top:"30%", left:"44%", fontSize:100, color:"rgba(124,58,237,0.03)", fontFamily:"Georgia,serif", pointerEvents:"none", userSelect:"none" }}>π</div>

      <div style={{ maxWidth:"var(--container-max)", margin:"0 auto", position:"relative", zIndex:1 }}>
        <div className="app-grid" style={{ display:"grid", gridTemplateColumns:"1fr 1.1fr", gap:64, alignItems:"center" }}>

          {/* LEFT — phone mockup */}
          <div style={{ display:"flex", justifyContent:"center", position:"relative" }}>
            {/* Floating math symbols */}
            {["∑","∫","π","√","∞"].map((s,i) => (
              <div key={i} aria-hidden="true" style={{ position:"absolute", fontSize:[28,22,32,20,26][i], color:"rgba(124,58,237,"+[0.12,0.09,0.14,0.08,0.11][i]+")", fontFamily:"Georgia,serif", left:["-8%","88%","92%","-10%","80%"][i], top:["10%","5%","55%","65%","78%"][i], userSelect:"none" }}>{s}</div>
            ))}
            {/* Phone frame */}
            <div style={{ width:260, background:"linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)", borderRadius:36, padding:"10px 8px", boxShadow:"0 40px 80px rgba(124,58,237,0.22), 0 8px 24px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.08)", position:"relative" }}>
              {/* Notch */}
              <div style={{ width:80, height:22, background:"#0d0d1a", borderRadius:12, margin:"0 auto 6px", display:"flex", alignItems:"center", justifyContent:"center" }}>
                <div style={{ width:40, height:4, background:"rgba(255,255,255,0.15)", borderRadius:4 }} />
              </div>
              {/* Screen */}
              <div style={{ background:"linear-gradient(160deg, #1e1b4b 0%, #312e81 100%)", borderRadius:24, padding:"16px 14px", minHeight:440, overflow:"hidden" }}>
                {/* App header */}
                <div style={{ display:"flex", alignItems:"center", gap:8, marginBottom:16 }}>
                  <img loading="lazy" decoding="async" src="uploads/watermark-sm.png" alt="MathMentor" style={{ height:28, width:"auto" }} />
                </div>
                {/* Welcome card */}
                <div style={{ background:"rgba(255,255,255,0.08)", borderRadius:14, padding:"12px 12px", marginBottom:10 }}>
                  <div style={{ fontSize:10, color:"rgba(255,255,255,0.5)", marginBottom:2 }}>Good Morning 👋</div>
                  <div style={{ fontSize:13, fontWeight:700, color:"#fff" }}>Welcome back, Student!</div>
                  <div style={{ marginTop:8, display:"flex", gap:6 }}>
                    <div style={{ flex:1, background:"linear-gradient(135deg,#7c3aed,#4f46e5)", borderRadius:8, padding:"8px 8px", textAlign:"center" }}>
                      <div style={{ fontSize:9, color:"rgba(255,255,255,0.7)" }}>Next Class</div>
                      <div style={{ fontSize:11, fontWeight:700, color:"#fff" }}>Today 5PM</div>
                    </div>
                    <div style={{ flex:1, background:"rgba(255,255,255,0.07)", borderRadius:8, padding:"8px 8px", textAlign:"center" }}>
                      <div style={{ fontSize:9, color:"rgba(255,255,255,0.7)" }}>Progress</div>
                      <div style={{ fontSize:11, fontWeight:700, color:"#a78bfa" }}>84%</div>
                    </div>
                  </div>
                </div>
                {/* Feature list */}
                {[
                  { icon:"🎥", label:"Live Classes",        badge:"Today 5PM", badgeColor:"#22c55e" },
                  { icon:"📚", label:"Recorded Lectures",   badge:"12 videos",  badgeColor:"#3b82f6" },
                  { icon:"📝", label:"Practice Tests",      badge:"3 pending",  badgeColor:"#f59e0b" },
                  { icon:"📈", label:"My Progress",         badge:"84%",        badgeColor:"#a78bfa" },
                  { icon:"💬", label:"Doubt Support",       badge:"Active",     badgeColor:"#22c55e" },
                ].map(item => (
                  <div key={item.label} style={{ display:"flex", alignItems:"center", justifyContent:"space-between", background:"rgba(255,255,255,0.05)", borderRadius:10, padding:"8px 10px", marginBottom:6 }}>
                    <div style={{ display:"flex", alignItems:"center", gap:7 }}>
                      <span style={{ fontSize:14 }}>{item.icon}</span>
                      <span style={{ fontSize:11, color:"rgba(255,255,255,0.82)", fontWeight:500 }}>{item.label}</span>
                    </div>
                    <span style={{ fontSize:9, fontWeight:700, color:item.badgeColor, background:item.badgeColor+"18", borderRadius:6, padding:"2px 6px" }}>{item.badge}</span>
                  </div>
                ))}
              </div>
              {/* Home bar */}
              <div style={{ width:60, height:4, background:"rgba(255,255,255,0.2)", borderRadius:4, margin:"8px auto 2px" }} />
            </div>
          </div>

          {/* RIGHT — content */}
          <div>
            <div style={{ display:"inline-flex", alignItems:"center", gap:7, background:"rgba(124,58,237,0.08)", border:"1px solid rgba(124,58,237,0.18)", borderRadius:"var(--rounded-full)", padding:"5px 16px", marginBottom:20, fontSize:13, fontWeight:600, color:"#7c3aed" }}>
              📱 Learn Anywhere
            </div>
            <h2 style={{ margin:"0 0 14px", fontSize:"clamp(26px,3.2vw,42px)", fontWeight:800, color:"var(--ink-95)", letterSpacing:"-1.5px", lineHeight:1.1, fontFamily:"var(--font-sans)" }}>
              Your Mathematics Classroom,<br />
              <span style={{ background:"linear-gradient(90deg,#7c3aed,#4f46e5)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text", MozBackgroundClip: "text" }}>Anywhere.</span>
            </h2>
            <p style={{ margin:"0 0 28px", fontSize:15, color:"var(--ink-muted)", lineHeight:1.7, maxWidth:440 }}>
              Access live classes, recorded lectures, practice tests, assignments, progress tracking, and doubt support — all from one powerful learning app.
            </p>

            {/* Feature grid */}
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10, marginBottom:32 }}>
              {features.map(f => (
                <div key={f.label} style={{ display:"flex", alignItems:"center", gap:10, background:"#faf8ff", border:"1px solid rgba(124,58,237,0.08)", borderRadius:12, padding:"11px 14px", transition:"transform 150ms ease, box-shadow 150ms ease" }}
                  onMouseEnter={e=>{ e.currentTarget.style.transform="translateY(-2px)"; e.currentTarget.style.boxShadow="0 6px 18px rgba(124,58,237,0.10)"; }}
                  onMouseLeave={e=>{ e.currentTarget.style.transform="none"; e.currentTarget.style.boxShadow="none"; }}
                >
                  <span style={{ fontSize:18 }}>{f.icon}</span>
                  <span style={{ fontSize:13, fontWeight:600, color:"var(--ink-secondary)" }}>{f.label}</span>
                </div>
              ))}
            </div>

            {/* Download button + QR */}
            <div style={{ display:"flex", alignItems:"center", gap:24, marginBottom:24, flexWrap:"wrap" }}>
              <a href={APP_LINK} target="_blank" rel="noopener noreferrer"
                style={{ display:"inline-flex", alignItems:"center", gap:10, background:"linear-gradient(90deg,#7c3aed,#4f46e5)", borderRadius:14, padding:"14px 28px", textDecoration:"none", boxShadow:"0 8px 24px rgba(124,58,237,0.28)", transition:"transform 160ms ease, box-shadow 160ms ease" }}
                onMouseEnter={e=>{ e.currentTarget.style.transform="translateY(-3px)"; e.currentTarget.style.boxShadow="0 14px 36px rgba(124,58,237,0.38)"; }}
                onMouseLeave={e=>{ e.currentTarget.style.transform="none"; e.currentTarget.style.boxShadow="0 8px 24px rgba(124,58,237,0.28)"; }}
              >
                <svg width="22" height="22" viewBox="0 0 24 24" fill="white"><path d="M3 18.5v-13A1.5 1.5 0 015.2 4.1l13 6.5a1.5 1.5 0 010 2.7l-13 6.5A1.5 1.5 0 013 18.5z"/></svg>
                <div>
                  <div style={{ fontSize:10, color:"rgba(255,255,255,0.7)", lineHeight:1, marginBottom:2 }}>GET IT ON</div>
                  <div style={{ fontSize:16, fontWeight:800, color:"#fff", lineHeight:1 }}>Download App</div>
                </div>
              </a>
              {/* QR Code */}
              <div style={{ textAlign:"center" }}>
                <img loading="lazy" decoding="async" src={"https://api.qrserver.com/v1/create-qr-code/?size=80x80&data=" + encodeURIComponent(APP_LINK)} alt="Scan to Download" style={{ width:80, height:80, borderRadius:10, border:"2px solid rgba(124,58,237,0.15)", display:"block" }} />
                <div style={{ fontSize:10, color:"var(--ink-faint)", marginTop:5, fontWeight:600 }}>Scan to Download</div>
              </div>
            </div>

            {/* Stats badges */}
            <div style={{ display:"flex", gap:8, flexWrap:"wrap" }}>
              {stats.map(s => (
                <div key={s.text} style={{ display:"inline-flex", alignItems:"center", gap:6, background:"rgba(124,58,237,0.06)", border:"1px solid rgba(124,58,237,0.10)", borderRadius:"var(--rounded-full)", padding:"5px 12px", fontSize:11, fontWeight:600, color:"var(--ink-secondary)" }}>
                  <span style={{ fontSize:13 }}>{s.icon}</span>{s.text}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TestimonialsSection() {
  const all = [
    { name: "Parent of Aarav",       sub: "Grade 9 · USA Curriculum",         location: "California, USA",      flag: "us", type: "Parent Review",   typeColor: "#0075de", achievement: "📈 Grade Improvement",
      quote: "Jayesh sir's ability to explain complex mathematical concepts in a clear and structured manner has greatly benefited my son in his 9th-grade studies. The lessons are well-organized, engaging, and tailored to ensure that my son build a strong foundation in mathematics. Jayesh sir demonstrates exceptional dedication and professionalism, fostering an environment where my son feels encouraged to ask questions and develop confidence in problem-solving. My son has shown significant improvement and enthusiasm for the subject, which speaks volumes about the teacher's effectiveness and commitment to student success. I highly recommend Jayesh sir for his excellent teaching skills and positive impact on students' academic growth." },
    { name: "Parent of Aditi & Krish", sub: "Year 12 · Australian Curriculum",  location: "Melbourne, Australia", flag: "au", type: "Parent Review",   typeColor: "#0075de", achievement: "🎓 Aerospace Engineering Admission",
      quote: "If you are looking for a math tutor who can take your child from foundational levels to elite academic success, look no further than Jayesh sir. We have used his services for both of our children with outstanding outcomes. Our Son has shown remarkable improvement and has successfully transitioned into Advanced Math. Our Daughter, under sir's mentorship, achieved the results needed to get into Aerospace and Aeronautical Engineering at a prestigious Melbourne university. Jayesh sir doesn't just teach formulas; he builds the analytical mindset required for high-level engineering and mathematics. We are so grateful for his help!" },
    { name: "Pranshul Pamecha",       sub: "Grade 11–12 · IB Mathematics",     location: "Madison, USA",         flag: "us", type: "Alumni Review",   typeColor: "#7c3aed", achievement: "🏆 University of Wisconsin–Madison",
      quote: "Jayesh Sir taught me Mathematics during Grades 11 and 12. Because of my active involvement in extracurricular activities, I often needed to stay ahead of the class in several topics and his guidance made that possible. His teaching style is exceptionally clear and concept-driven; he ensures every topic is understood thoroughly rather than just memorized. He explains even complex problems with patience and simplicity, making learning both engaging and effective. Thanks to his mentorship, I achieved excellent results in Mathematics. I am now pursuing a Computer Science degree at the University of Wisconsin–Madison, one of the top 15 computer science programs in the United States, and I credit much of my grade 11 & 12 mathematical and problem-solving ability to his teaching." },
    { name: "Bhumi",                  sub: "Student · Applied Mathematics",     location: "India",                flag: "in", type: "Student Review", typeColor: "#0d9488", achievement: null,
      quote: "Jayesh Sir is a highly trustworthy teacher because of his consistent dedication and sincere approach toward teaching. As my Applied Mathematics mentor, he not only demonstrates strong subject knowledge but also explains concepts in a clear and structured manner, making even difficult topics easier to understand. He is always prompt in resolving doubts and ensures that no student is left confused, which reflects his genuine concern for our learning. His patience, clarity, responsiveness, and professionalism represent all the essential qualities of a good teacher. Because of his reliable guidance and supportive nature, I truly feel confident studying under him." },
    { name: "Chesta",                 sub: "Student · Mathematics",             location: "Mumbai, India",        flag: "in", type: "Student Review", typeColor: "#0d9488", achievement: null,
      quote: "I was a former student and he is a wonderful teacher. We had a very short time of sessions but his teaching skills improved a lot of my skills within a month. If you are ready to skill up your learning then he is the best teacher to go for." },
    { name: "Kenaz",                  sub: "Student · Mathematics",             location: "India",                flag: "in", type: "Student Review", typeColor: "#0d9488", achievement: null,
      quote: "Jayesh Sir is an amazing teacher, his dedication and hardwork towards the students are appreciative. He made the learning process exciting and meaningful, and being his former student I can ensure that my experience with him was worth it!" },
    { name: "Meghna",                 sub: "Senior Secondary · CBSE",           location: "Udaipur, India",       flag: "in", type: "Student Review", typeColor: "#0d9488", achievement: null,
      quote: "I had the pleasure of being student of Jayesh Sir during my Senior Secondary. He explained complex mathematical concepts with clarity and precision and has the ability of making difficult topics memorable and engaging. He always went above and beyond to provide extra help to students who needed it." },
    { name: "Priyanka",               sub: "Student · Mathematics",             location: "India",                flag: "in", type: "Student Review", typeColor: "#0d9488", achievement: null,
      quote: "I am sincerely grateful to Jayesh sir for making the subject so engaging and meaningful. His exceptional teaching methods, patience, and clear explanations have helped me a lot in maths and develop a genuine interest in it. Sir always encouraged us to think critically, solve problems creatively, and never give up when faced with challenges. His constant support and motivation inspired confidence in me and created a positive learning atmosphere in the classroom. Beyond formulas and numbers, he taught us the value of logic, discipline, and perseverance. Thank you for being a wonderful mentor who made a lasting impact on both my academic journey and personal growth. I truly appreciate all your hard work and dedication." },
    { name: "Reet",                   sub: "Student · Mathematics",             location: "India",                flag: "in", type: "Student Review", typeColor: "#0d9488", achievement: null,
      quote: "He's truly an exceptional educator with a remarkable ability to make complex concepts accessible and engaging. He is excellent at his work and has helped me regain the hope I had lost. Thanks to his guidance, I've gained confidence in math and developed a genuine interest in the subject — one I used to be afraid of. His encouragement and support have truly changed my perspective and inspired me to strive for excellence. He is such an amazing teacher, and I'm truly grateful for everything he has done." },
    { name: "Saad",                   sub: "Student · Mathematics",             location: "India",                flag: "in", type: "Student Review", typeColor: "#0d9488", achievement: null,
      quote: "Mr. Jayesh is an excellent teacher. He teaches maths proficiently and in an understandable manner with practical examples. He makes sure that all the concepts of the student are clear before moving ahead and evaluates the student's performance in maths on a regular basis. He makes maths easy to understand and copiously covers each and every topic of the syllabus. He is also very kind, enthusiastic, and understanding. He has boosted my confidence in maths and has helped me improve my grades significantly." },
  ];

  const PER_PAGE = 3;
  const [idx, setIdx] = React.useState(0);
  const total = Math.ceil(all.length / PER_PAGE);
  const visible = all.slice(idx * PER_PAGE, idx * PER_PAGE + PER_PAGE);
  const prev = () => setIdx(i => Math.max(0, i - 1));
  const next = () => setIdx(i => Math.min(total - 1, i + 1));

  const stats = [
    { icon: "👨‍🎓", text: "5,000+ Students Mentored" },
    { icon: "🌍", text: "Students from 15+ Countries" },
    { icon: "⭐", text: "4.9/5 Average Rating" },
    { icon: "📚", text: "IB · IGCSE · SAT · JEE · GATE" },
  ];

  function AvatarIcon({ type }) {
    const isParent = type === "Parent Review";
    const isAlumni = type === "Alumni Review";
    const bg = isParent
      ? "linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%)"
      : isAlumni
      ? "linear-gradient(135deg, #0d9488 0%, #0ea5e9 100%)"
      : "linear-gradient(135deg, #7c3aed 0%, #a855f7 100%)";
    return (
      <div style={{ width: 52, height: 52, borderRadius: "50%", flexShrink: 0, border: "2px solid rgba(255,255,255,0.25)", boxShadow: "0 4px 12px rgba(0,0,0,0.25)", background: bg, display: "flex", alignItems: "center", justifyContent: "center" }}>
        {isParent ? (
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="8" r="4" fill="rgba(255,255,255,0.9)"/>
            <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" fill="rgba(255,255,255,0.9)"/>
          </svg>
        ) : isAlumni ? (
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="9" r="3.5" fill="rgba(255,255,255,0.9)"/>
            <path d="M12 3L2 8l10 5 10-5-10-5z" fill="rgba(255,255,255,0.75)"/>
            <path d="M4 20c0-3.5 3.6-6 8-6s8 2.5 8 6" fill="rgba(255,255,255,0.9)"/>
          </svg>
        ) : (
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="8" r="3.5" fill="rgba(255,255,255,0.9)"/>
            <path d="M5 20c0-3.8 3.1-6.5 7-6.5s7 2.7 7 6.5" fill="rgba(255,255,255,0.9)"/>
          </svg>
        )}
      </div>
    );
  }

  return (
    <section style={{ background: "linear-gradient(135deg, #1e1b4b 0%, #312e81 25%, #4c1d95 55%, #1e1b4b 100%)", padding: "88px 48px", position: "relative", overflow: "hidden" }}>
      <div aria-hidden="true" style={{ position:"absolute", top:-100, left:-60, width:420, height:420, borderRadius:"50%", background:"radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)", pointerEvents:"none" }} />
      <div aria-hidden="true" style={{ position:"absolute", bottom:-80, right:-60, width:380, height:380, borderRadius:"50%", background:"radial-gradient(circle, rgba(99,102,241,0.20) 0%, transparent 70%)", pointerEvents:"none" }} />
      {[...Array(20)].map((_,i) => (
        <div key={i} aria-hidden="true" style={{ position:"absolute", left:((i*47+13)%100)+"%", top:((i*31+7)%100)+"%", width: i%3===0?3:2, height: i%3===0?3:2, borderRadius:"50%", background:"rgba(255,255,255,0.22)", pointerEvents:"none" }} />
      ))}

      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", position: "relative", zIndex: 1 }}>
        <div style={{ textAlign: "center", marginBottom: 44 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 7, background: "rgba(255,255,255,0.10)", border: "1px solid rgba(255,255,255,0.18)", borderRadius: "var(--rounded-full)", padding: "5px 16px", marginBottom: 18, fontSize: 13, fontWeight: 600, color: "rgba(255,255,255,0.85)" }}>
            ⭐ 4.9/5 Average Rating
          </div>
          <h2 style={{ margin: "0 0 14px", fontSize: "clamp(28px,3.5vw,48px)", fontWeight: 800, color: "#fff", letterSpacing: "-1.5px", lineHeight: 1.08, fontFamily: "var(--font-sans)" }}>
            Trusted by Parents.<br />
            <span style={{ background: "linear-gradient(90deg, #a78bfa 0%, #f0abfc 100%)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text", MozBackgroundClip: "text" }}>Loved by Students.</span>
          </h2>
          <p style={{ margin: "0 auto", fontSize: 16, color: "rgba(255,255,255,0.62)", maxWidth: 560, lineHeight: 1.65 }}>
            Hear from students and parents across the USA, Canada, Australia, UAE, Hong Kong, Singapore, and India who have transformed their mathematics journey with MathMentor.
          </p>
        </div>

        <div className="testimonial-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, alignItems: "start", marginBottom: 32 }}>
          {visible.map(t => (
            <div key={t.name}
              style={{ background: "rgba(255,255,255,0.08)", backdropFilter: "blur(20px)", WebkitBackdropFilter: "blur(20px)", border: "1px solid rgba(255,255,255,0.14)", borderRadius: 24, padding: "28px 24px", boxShadow: "0 8px 32px rgba(0,0,0,0.25)", transition: "transform 200ms ease, box-shadow 200ms ease, background 200ms ease", cursor: "default", display: "flex", flexDirection: "column" }}
              onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-6px)"; e.currentTarget.style.background = "rgba(255,255,255,0.13)"; e.currentTarget.style.boxShadow = "0 24px 60px rgba(0,0,0,0.35), 0 0 30px rgba(167,139,250,0.15)"; }}
              onMouseLeave={e => { e.currentTarget.style.transform = "none"; e.currentTarget.style.background = "rgba(255,255,255,0.08)"; e.currentTarget.style.boxShadow = "0 8px 32px rgba(0,0,0,0.25)"; }}
            >
              <div aria-hidden="true" style={{ fontSize: 64, lineHeight: 0.7, color: "rgba(167,139,250,0.25)", fontFamily: "Georgia, serif", marginBottom: 8, userSelect: "none" }}>"</div>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
                <div style={{ display: "flex", gap: 2 }}>{[0,1,2,3,4].map(i => <span key={i} style={{ fontSize: 13, color: "#fbbf24" }}>★</span>)}</div>
                <span style={{ fontSize: 10, fontWeight: 700, color: t.typeColor, background: t.typeColor + "22", border: "1px solid " + t.typeColor + "40", borderRadius: "var(--rounded-full)", padding: "3px 10px" }}>{t.type}</span>
              </div>
              {t.achievement && (
                <div style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "rgba(251,191,36,0.12)", border: "1px solid rgba(251,191,36,0.25)", borderRadius: "var(--rounded-full)", padding: "4px 12px", fontSize: 11, fontWeight: 700, color: "#fbbf24", marginBottom: 14, alignSelf: "flex-start" }}>
                  {t.achievement}
                </div>
              )}
              <p style={{ margin: "0 0 20px", fontSize: 14, color: "rgba(255,255,255,0.82)", lineHeight: 1.8, flexGrow: 1 }}>"{t.quote}"</p>
              <div style={{ borderTop: "1px solid rgba(255,255,255,0.10)", paddingTop: 16, display: "flex", alignItems: "center", gap: 12 }}>
                <AvatarIcon type={t.type} />
                <div style={{ flex: 1 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 3 }}>
                    <img loading="lazy" decoding="async" src={"https://flagcdn.com/w40/" + t.flag + ".png"} alt={t.location} style={{ width: 18, borderRadius: 2, flexShrink: 0 }} />
                    <span style={{ fontSize: 13, fontWeight: 700, color: "#fff", lineHeight: 1.2 }}>{t.name}</span>
                  </div>
                  <div style={{ fontSize: 11, color: "rgba(255,255,255,0.45)", marginBottom: 2 }}>{t.location}</div>
                  <div style={{ fontSize: 11, color: "rgba(167,139,250,0.8)", fontWeight: 500 }}>{t.sub}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 16, marginBottom: 52 }}>
          <button onClick={prev} disabled={idx === 0} aria-label="Previous testimonials" style={{ width: 44, height: 44, borderRadius: "50%", background: idx===0?"rgba(255,255,255,0.05)":"rgba(255,255,255,0.12)", border: "1px solid rgba(255,255,255,0.18)", color: idx===0?"rgba(255,255,255,0.25)":"#fff", fontSize: 20, cursor: idx===0?"default":"pointer", display:"flex", alignItems:"center", justifyContent:"center" }}>←</button>
          <div style={{ display: "flex", gap: 8 }}>
            {[...Array(total)].map((_,i) => (
              <button key={i} onClick={() => setIdx(i)} style={{ width: i===idx?24:8, height: 8, borderRadius: 99, background: i===idx?"#a78bfa":"rgba(255,255,255,0.25)", border:"none", cursor:"pointer", padding:0, transition:"all 200ms ease" }} />
            ))}
          </div>
          <button onClick={next} disabled={idx === total-1} aria-label="Next testimonials" style={{ width: 44, height: 44, borderRadius: "50%", background: idx===total-1?"rgba(255,255,255,0.05)":"rgba(255,255,255,0.12)", border: "1px solid rgba(255,255,255,0.18)", color: idx===total-1?"rgba(255,255,255,0.25)":"#fff", fontSize: 20, cursor: idx===total-1?"default":"pointer", display:"flex", alignItems:"center", justifyContent:"center" }}>→</button>
        </div>

        <div style={{ background: "rgba(255,255,255,0.07)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,0.12)", borderRadius: 20, padding: "36px 40px", textAlign: "center" }}>
          <h3 style={{ margin: "0 0 8px", fontSize: "clamp(18px,2.2vw,26px)", fontWeight: 800, color: "#fff", letterSpacing: "-0.5px", fontFamily: "var(--font-sans)" }}>
            Join 5,000+ Students Learning Mathematics with Confidence
          </h3>
          <p style={{ margin: "0 0 24px", fontSize: 15, color: "rgba(255,255,255,0.58)" }}>Start your personalized learning journey today — completely free, no commitment required.</p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" onClick={() => window.__mmBook?.()}>Book Free Assessment</Button>
            <button onClick={() => window.__mmBook?.()} style={{ padding: "12px 24px", background: "rgba(255,255,255,0.10)", border: "1px solid rgba(255,255,255,0.22)", borderRadius: "var(--rounded-full)", fontSize: 15, fontWeight: 600, color: "#fff", cursor: "pointer", fontFamily: "var(--font-sans)" }}>Talk to JK Sir →</button>
          </div>
        </div>
      </div>
    </section>
  );
}
function FAQSection() {
  const [openIdx, setOpenIdx] = React.useState(null);
  const faqs = [
    { q: "Which countries do you teach students from?", a: "We teach students from USA, Canada, Australia, UAE, Hong Kong, Singapore, UK, India, and many more countries worldwide. Our fully online platform is accessible from any country with a stable internet connection." },
    { q: "Do you provide 1-to-1 classes?", a: "Yes, all our core tutoring sessions are personalized 1-to-1 live online classes. This ensures every student receives 100% dedicated attention and a learning experience completely tailored to their individual needs." },
    { q: "Which curriculums do you cover?", a: "We cover IB Mathematics (AA & AI), IGCSE Cambridge, USA Common Core & AP Calculus, Australian Curriculum, Canadian Provincial Curriculum, and CBSE. We also prepare for IIT JEE, Digital SAT, GATE, ACT, and Math Olympiads." },
    { q: "Are classes available across different time zones?", a: "Yes. We regularly schedule sessions across USA (EST, CST, PST), Australian, UAE, Hong Kong, Singapore, and Canadian time zones. We work around your school schedule and local time to find the perfect slot." },
    { q: "Do you provide trial classes?", a: "Yes, we offer a free trial class for all new students. This helps us assess the student's current level, understand their needs, and ensure you're completely comfortable before any commitment." },
    { q: "Can students join from any country?", a: "Yes. Our platform is fully online and accessible from anywhere in the world. We use interactive digital whiteboards and live video for all sessions — as close to a one-on-one classroom as possible." },
  ];
  return (
    <section id="faq" style={{ background: "var(--canvas-soft)", padding: "80px 32px" }}>
      <div style={{ maxWidth: 760, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 52 }}>
          <Badge>FAQ</Badge>
          <h2 className="mm-heading-1" style={{ margin: "14px 0 12px", color: "var(--ink-95)" }}>Frequently Asked Questions</h2>
          <p style={{ margin: 0, fontSize: 16, color: "var(--ink-muted)" }}>Everything you need to know about MathMentor and getting started.</p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {faqs.map((faq, i) => (
            <Card key={i} variant="feature" padding="0">
              <button onClick={() => setOpenIdx(openIdx === i ? null : i)} aria-expanded={openIdx === i} aria-controls={"faq-panel-" + i} id={"faq-btn-" + i} style={{ width: "100%", background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "space-between", padding: "18px 24px", gap: 16, textAlign: "left", fontFamily: "var(--font-sans)" }}>
                <span style={{ fontSize: 16, fontWeight: 600, color: "var(--ink-95)", lineHeight: 1.4 }}>{faq.q}</span>
                <span style={{ fontSize: 22, color: openIdx === i ? "var(--primary)" : "var(--ink-faint)", flexShrink: 0, display: "inline-block", transform: openIdx === i ? "rotate(45deg)" : "none", transition: "transform 200ms ease, color 120ms ease" }}>+</span>
              </button>
              {openIdx === i && (
                <div id={"faq-answer-" + i} role="region" aria-labelledby={"faq-btn-" + i} style={{ padding: "0 24px 20px", borderTop: "1px solid var(--hairline)" }}>
                  <p style={{ margin: "16px 0 0", fontSize: 15, color: "var(--ink-muted)", lineHeight: 1.65 }}>{faq.a}</p>
                </div>
              )}
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function ContactFormSection() {
  const [form, setForm] = React.useState({ name:'', email:'', phone:'', country:'', curriculum:'', grade:'', timezone:'', timing:'', message:'' });
  const [errors, setErrors] = React.useState({});
  const [submitting, setSubmitting] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);

  const set = (k, v) => {
    setForm(f => ({ ...f, [k]: v }));
    if (errors[k]) setErrors(e => ({ ...e, [k]: null })); // clear error on type
  };

  const validate = () => {
    const e = {};
    if (!form.name.trim() || form.name.trim().length < 2)
      e.name = 'Please enter your full name';
    if (!form.email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim()))
      e.email = 'Please enter a valid email address';
    if (!form.phone.trim() || !/^[+]?[\d\s().\-]{7,20}$/.test(form.phone.trim()))
      e.phone = 'Please enter a valid phone number (e.g. +1 234 567 8900)';
    if (!form.country)
      e.country = 'Please select your country';
    if (!form.curriculum)
      e.curriculum = 'Please select a curriculum';
    return e;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const errs = validate();
    if (Object.keys(errs).length > 0) {
      setErrors(errs);
      // Scroll to first error
      const firstErr = document.querySelector('[data-field-error]');
      if (firstErr) firstErr.scrollIntoView({ behavior: 'smooth', block: 'center' });
      return;
    }
    setSubmitting(true);
    const lines = [
      'Hi JK Sir, I would like to book a free mathematics assessment.',
      '',
      'Name: ' + form.name,
      'Email: ' + form.email,
      'WhatsApp: ' + form.phone,
      'Country: ' + form.country,
      'Curriculum: ' + form.curriculum,
      form.grade ? 'Grade / Year: ' + form.grade : null,
      form.timezone ? 'Time Zone: ' + form.timezone : null,
      form.timing ? 'Preferred Timing: ' + form.timing : null,
      form.message ? 'Message: ' + form.message : null,
    ].filter(Boolean).join('\n');
    window.open('https://wa.me/919928793096?text=' + encodeURIComponent(lines), '_blank');
    setSubmitting(false);
    setSubmitted(true);
    setForm({ name:'', email:'', phone:'', country:'', curriculum:'', grade:'', timezone:'', timing:'', message:'' });
  };

  const trustCards = [
    { icon: "📞", label: "WhatsApp / Call",    value: "+91 9928793096" },
    { icon: "✉️",  label: "Email",             value: "jayeshrwt@gmail.com" },
    { icon: "📅", label: "Flexible Timing",    value: "All Time Zones" },
    { icon: "💬", label: "Support",            value: "WhatsApp Direct" },
    { icon: "👨‍🎓", label: "Students Mentored", value: "5,000+" },
    { icon: "⭐", label: "Parent Rating",      value: "4.9 / 5" },
  ];

  const steps = [
    { icon: "1️⃣", text: "We contact you within 1 hour" },
    { icon: "2️⃣", text: "Free assessment is scheduled" },
    { icon: "3️⃣", text: "Personalized learning plan created" },
    { icon: "4️⃣", text: "Regular 1-to-1 classes begin" },
  ];

  const curricula = [
    { group: "International", items: ["IB Math AA (Analysis & Approaches)", "IB Math AI (Applications & Interpretation)", "IGCSE Mathematics", "A Levels Mathematics"] },
    { group: "USA", items: ["USA Common Core", "AP Calculus AB & BC", "SAT Mathematics", "ACT Mathematics"] },
    { group: "Other Curriculums", items: ["Australian Curriculum", "Canadian Curriculum", "CBSE Mathematics"] },
    { group: "Competitive Exams", items: ["IIT JEE Main & Advanced", "GATE Mathematics", "Math Olympiad"] },
  ];

  const baseInput = { width:'100%', padding:'13px 16px', fontSize:16, border:'1.5px solid rgba(124,58,237,0.15)', borderRadius:12, fontFamily:'var(--font-sans)', color:'var(--ink-secondary)', background:'#fafafa', outline:'none', boxSizing:'border-box', transition:'border-color 150ms ease, box-shadow 150ms ease', WebkitAppearance:'none', appearance:'none' };
  const errInput = { ...baseInput, border:'1.5px solid #ef4444', background:'#fff5f5' };
  const labelStyle = { display:'block', fontSize:12, fontWeight:700, color:'var(--ink-secondary)', marginBottom:6, textTransform:'uppercase', letterSpacing:'0.5px' };

  const FieldError = ({ field }) => errors[field] ? (
    <div data-field-error role="alert" style={{ fontSize:12, color:'#ef4444', marginTop:4, display:'flex', alignItems:'center', gap:5 }}>
      <span aria-hidden="true">⚠</span> {errors[field]}
    </div>
  ) : null;

  const focusStyle = (e) => { e.target.style.borderColor='#7c3aed'; e.target.style.boxShadow='0 0 0 3px rgba(124,58,237,0.08)'; };
  const blurStyle  = (e, field) => { e.target.style.borderColor=errors[field]?'#ef4444':'rgba(124,58,237,0.15)'; e.target.style.boxShadow='none'; };

  return (
    <section id="contact-form" style={{ background:'linear-gradient(135deg,#faf8ff 0%,#f0ebff 40%,#ebf4ff 100%)', padding:'88px 48px', position:'relative', overflow:'hidden' }}>
      <div aria-hidden="true" style={{ position:'absolute',top:-80,right:-60,width:380,height:380,borderRadius:'50%',background:'radial-gradient(circle,rgba(124,58,237,0.08) 0%,transparent 70%)',pointerEvents:'none' }} />
      <div aria-hidden="true" style={{ position:'absolute',bottom:-60,left:-60,width:300,height:300,borderRadius:'50%',background:'radial-gradient(circle,rgba(79,70,229,0.07) 0%,transparent 70%)',pointerEvents:'none' }} />
      <div aria-hidden="true" style={{ position:'absolute',top:'30%',left:'44%',fontSize:100,color:'rgba(124,58,237,0.03)',fontFamily:'Georgia,serif',pointerEvents:'none',userSelect:'none' }}>∑</div>

      <div style={{ maxWidth:'var(--container-max)',margin:'0 auto',position:'relative',zIndex:1 }}>
        <div className="contact-grid" style={{ display:'grid',gridTemplateColumns:'1fr 1.15fr',gap:60,alignItems:'start' }}>

          {/* LEFT panel */}
          <div>
            <div style={{ display:'inline-flex',alignItems:'center',gap:7,background:'rgba(124,58,237,0.08)',border:'1px solid rgba(124,58,237,0.18)',borderRadius:'var(--rounded-full)',padding:'5px 16px',marginBottom:20,fontSize:13,fontWeight:600,color:'#7c3aed' }}>
              ✨ Free Academic Assessment
            </div>
            <h2 style={{ margin:'0 0 16px',fontSize:'clamp(26px,3vw,40px)',fontWeight:800,color:'var(--ink-95)',letterSpacing:'-1.5px',lineHeight:1.1,fontFamily:'var(--font-sans)' }}>
              Book Your FREE<br />
              <span style={{ background:'linear-gradient(90deg,#7c3aed,#4f46e5)',WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent',backgroundClip:'text',MozBackgroundClip:'text' }}>Mathematics Assessment</span>
            </h2>
            <p style={{ margin:'0 0 32px',fontSize:15,color:'var(--ink-muted)',lineHeight:1.7,maxWidth:400 }}>
              In one free 30-minute session, we'll identify exactly where your child is, where they need to go, and the clearest path to get there. No sales pitch — just a genuine conversation about how we can help your child with mathematics.
            </p>
            <div className="trust-grid" style={{ display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,marginBottom:36 }}>
              {trustCards.map(c => (
                <div key={c.label} style={{ background:'#fff',borderRadius:14,padding:'14px 16px',border:'1px solid rgba(124,58,237,0.08)',boxShadow:'0 2px 12px rgba(0,0,0,0.05)',display:'flex',alignItems:'center',gap:10 }}>
                  <span style={{ fontSize:22,flexShrink:0 }}>{c.icon}</span>
                  <div>
                    <div style={{ fontSize:10,fontWeight:700,color:'var(--ink-faint)',textTransform:'uppercase',letterSpacing:'0.5px',marginBottom:2 }}>{c.label}</div>
                    <div style={{ fontSize:13,fontWeight:700,color:'var(--ink-95)' }}>{c.value}</div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ background:'#fff',borderRadius:16,padding:'20px',border:'1px solid rgba(124,58,237,0.08)',boxShadow:'0 2px 12px rgba(0,0,0,0.04)' }}>
              <div style={{ fontSize:12,fontWeight:700,color:'#7c3aed',textTransform:'uppercase',letterSpacing:'0.5px',marginBottom:14 }}>What happens after you submit</div>
              {steps.map((s,i) => (
                <div key={i} style={{ display:'flex',gap:12,alignItems:'flex-start' }}>
                  <div style={{ display:'flex',flexDirection:'column',alignItems:'center',flexShrink:0 }}>
                    <span style={{ fontSize:18,lineHeight:1 }}>{s.icon}</span>
                    {i < steps.length-1 && <div style={{ width:2,height:18,background:'rgba(124,58,237,0.15)',margin:'3px 0' }} />}
                  </div>
                  <p style={{ margin:'0 0 '+(i<steps.length-1?'0':'0')+'px',fontSize:13,color:'var(--ink-secondary)',lineHeight:1.5,paddingBottom:i<steps.length-1?4:0 }}>{s.text}</p>
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT — form */}
          <div style={{ background:'#fff',borderRadius:24,padding:'40px 36px',boxShadow:'0 8px 48px rgba(124,58,237,0.10),0 2px 12px rgba(0,0,0,0.06)',border:'1.5px solid rgba(124,58,237,0.10)',position:'relative',overflow:'hidden' }}>
            <div style={{ position:'absolute',top:0,left:0,right:0,height:4,background:'linear-gradient(90deg,#7c3aed,#4f46e5,#0ea5e9)' }} />

            {submitted ? (
              /* ── SUCCESS STATE ── */
              <div style={{ textAlign:'center',padding:'48px 20px' }}>
                <div style={{ fontSize:64,marginBottom:20 }}>🎉</div>
                <h3 style={{ margin:'0 0 12px',fontSize:24,fontWeight:800,color:'var(--ink-95)',fontFamily:'var(--font-sans)' }}>Assessment Request Sent!</h3>
                <p style={{ margin:'0 0 8px',fontSize:16,color:'var(--ink-secondary)',lineHeight:1.6 }}>
                  Your WhatsApp message has been prepared. JK Sir will personally respond within <strong>1 hour</strong>.
                </p>
                <p style={{ margin:'0 0 28px',fontSize:14,color:'var(--ink-muted)' }}>
                  Didn't open WhatsApp? <a href="https://wa.me/919928793096" target="_blank" rel="noopener noreferrer" style={{ color:'#7c3aed',fontWeight:600 }}>Click here to send it manually →</a>
                </p>
                <div style={{ display:'flex',gap:10,justifyContent:'center',flexWrap:'wrap',marginBottom:24 }}>
                  {['✔ No commitment required','✔ Free assessment','✔ Response within 1 hour'].map(t=>(
                    <span key={t} style={{ fontSize:13,fontWeight:600,color:'#15803d' }}>{t}</span>
                  ))}
                </div>
                <button onClick={()=>setSubmitted(false)} style={{ background:'rgba(124,58,237,0.08)',border:'1px solid rgba(124,58,237,0.2)',borderRadius:10,padding:'10px 22px',fontSize:14,fontWeight:600,color:'#7c3aed',cursor:'pointer',fontFamily:'var(--font-sans)' }}>
                  Submit Another Enquiry
                </button>
              </div>
            ) : (
              /* ── FORM STATE ── */
              <>
                <h3 style={{ margin:'0 0 6px',fontSize:22,fontWeight:800,color:'var(--ink-95)',letterSpacing:'-0.5px',fontFamily:'var(--font-sans)' }}>Start Your Free Assessment</h3>
                <p style={{ margin:'0 0 24px',fontSize:14,color:'var(--ink-muted)' }}>Fill in your details — JK Sir will personally reach out within 1 hour.</p>

                {Object.keys(errors).length > 0 && (
                  <div role="alert" style={{ background:'#fff5f5',border:'1px solid #fecaca',borderRadius:10,padding:'12px 16px',marginBottom:20,fontSize:13,color:'#dc2626',fontWeight:500 }}>
                    ⚠ Please fix the highlighted fields below before submitting.
                  </div>
                )}

                <form onSubmit={handleSubmit} noValidate aria-label="Book a free mathematics assessment">
                  <div style={{ display:'flex',flexDirection:'column',gap:16 }}>

                    <div className="form-2col" style={{ display:'grid',gridTemplateColumns:'1fr 1fr',gap:12 }}>
                      <div>
                        <label htmlFor="f-name" style={labelStyle}>Name *</label>
                        <input id="f-name" name="name" type="text" required autoComplete="name" aria-label="Student or parent full name" aria-describedby={errors.name?"f-name-err":undefined} aria-invalid={!!errors.name}
                          value={form.name} onChange={e=>set('name',e.target.value)} placeholder="Full name"
                          style={errors.name ? errInput : baseInput}
                          onFocus={focusStyle} onBlur={e=>blurStyle(e,'name')} />
                        <FieldError field="name" />
                        {errors.name && <span id="f-name-err" style={{display:'none'}}>{errors.name}</span>}
                      </div>
                      <div>
                        <label htmlFor="f-email" style={labelStyle}>Email *</label>
                        <input id="f-email" name="email" type="email" required autoComplete="email" aria-label="Email address" aria-invalid={!!errors.email}
                          value={form.email} onChange={e=>set('email',e.target.value)} placeholder="you@email.com"
                          style={errors.email ? errInput : baseInput}
                          onFocus={focusStyle} onBlur={e=>blurStyle(e,'email')} />
                        <FieldError field="email" />
                      </div>
                    </div>

                    <div className="form-2col" style={{ display:'grid',gridTemplateColumns:'1fr 1fr',gap:12 }}>
                      <div>
                        <label htmlFor="f-phone" style={labelStyle}>WhatsApp Number *</label>
                        <input id="f-phone" name="phone" type="tel" required autoComplete="tel" aria-label="WhatsApp number" aria-invalid={!!errors.phone}
                          value={form.phone} onChange={e=>set('phone',e.target.value)} placeholder="+1 234 567 8900"
                          style={errors.phone ? errInput : baseInput}
                          onFocus={focusStyle} onBlur={e=>blurStyle(e,'phone')} />
                        <FieldError field="phone" />
                      </div>
                      <div>
                        <label htmlFor="f-country" style={labelStyle}>Country *</label>
                        <select id="f-country" name="country" required aria-label="Country" aria-invalid={!!errors.country}
                          value={form.country} onChange={e=>set('country',e.target.value)}
                          style={errors.country ? errInput : baseInput}>
                          <option value="">Select country</option>
                          {['USA','Canada','Australia','UAE','Hong Kong','Singapore','India','UK','Other'].map(c=><option key={c} value={c}>{c}</option>)}
                        </select>
                        <FieldError field="country" />
                      </div>
                    </div>

                    <div>
                      <label htmlFor="f-curriculum" style={labelStyle}>Curriculum *</label>
                      <select id="f-curriculum" name="curriculum" required aria-label="Select curriculum" aria-invalid={!!errors.curriculum}
                        value={form.curriculum} onChange={e=>set('curriculum',e.target.value)}
                        style={errors.curriculum ? errInput : baseInput}>
                        <option value="">Choose your curriculum</option>
                        {curricula.map(g=>(
                          <optgroup key={g.group} label={"── "+g.group}>
                            {g.items.map(item=><option key={item} value={item}>{item}</option>)}
                          </optgroup>
                        ))}
                      </select>
                      <FieldError field="curriculum" />
                    </div>

                    <div className="form-2col" style={{ display:'grid',gridTemplateColumns:'1fr 1fr',gap:12 }}>
                      <div>
                        <label htmlFor="f-grade" style={labelStyle}>Grade / Year</label>
                        <select id="f-grade" name="grade" aria-label="Select grade" value={form.grade} onChange={e=>set('grade',e.target.value)} style={baseInput}>
                          <option value="">Select grade</option>
                          {['Grade 6','Grade 7','Grade 8','Grade 9','Grade 10','Grade 11','Grade 12','University','Other'].map(g=><option key={g} value={g}>{g}</option>)}
                        </select>
                      </div>
                      <div>
                        <label htmlFor="f-timezone" style={labelStyle}>Time Zone</label>
                        <select id="f-timezone" name="timezone" aria-label="Select time zone" value={form.timezone} onChange={e=>set('timezone',e.target.value)} style={baseInput}>
                          <option value="">Select time zone</option>
                          {['EST (USA East)','CST (USA Central)','PST (USA West)','AEST (Australia)','UAE / GST','SGT / HKT','IST (India)','GMT (UK)','Other'].map(tz=><option key={tz} value={tz}>{tz}</option>)}
                        </select>
                      </div>
                    </div>

                    <div>
                      <label htmlFor="f-timing" style={labelStyle}>Preferred Class Timing</label>
                      <input id="f-timing" name="timing" type="text" aria-label="Preferred class timing" value={form.timing} onChange={e=>set('timing',e.target.value)} placeholder="e.g. Weekdays 5–7 PM, Weekends morning" style={baseInput}
                        onFocus={focusStyle} onBlur={e=>blurStyle(e,'timing')} />
                    </div>

                    <div>
                      <label htmlFor="f-message" style={labelStyle}>Learning Goals / Message</label>
                      <textarea id="f-message" name="message" aria-label="Learning goals or message" value={form.message} onChange={e=>set('message',e.target.value)} placeholder="Tell us about your child's goals, current challenges, or any specific topics..." rows={3}
                        style={{...baseInput, resize:'none', lineHeight:1.5}}
                        onFocus={focusStyle} onBlur={e=>blurStyle(e,'message')} />
                    </div>

                    <button type="submit" disabled={submitting} aria-busy={submitting}
                      style={{ width:'100%',padding:'15px 24px',background:submitting?'#a78bfa':'linear-gradient(90deg,#7c3aed,#4f46e5)',border:'none',borderRadius:14,fontSize:16,fontWeight:700,color:'#fff',cursor:submitting?'wait':'pointer',fontFamily:'var(--font-sans)',boxShadow:'0 8px 24px rgba(124,58,237,0.28)',transition:'transform 160ms ease, box-shadow 160ms ease',display:'flex',alignItems:'center',justifyContent:'center',gap:8 }}
                      onMouseEnter={e=>{if(!submitting){e.currentTarget.style.transform='translateY(-2px)';e.currentTarget.style.boxShadow='0 12px 32px rgba(124,58,237,0.38)';}}}
                      onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='0 8px 24px rgba(124,58,237,0.28)';}}>
                      {submitting ? '⏳ Opening WhatsApp...' : '🚀 Book My FREE Assessment'}
                    </button>

                    <div style={{ display:'flex',flexWrap:'wrap',gap:'6px 16px',justifyContent:'center' }}>
                      {['✔ Free Consultation','✔ No Commitment','✔ Personalized Plan','✔ Response Within 1 Hour','✔ Secure Information'].map(t=>(
                        <span key={t} style={{ fontSize:11,color:'var(--ink-muted)',fontWeight:600 }}>{t}</span>
                      ))}
                    </div>

                  </div>
                </form>
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}
function CTASection() {
  const stars = Array.from({ length: 32 });
  const glows = [
    { c: "var(--accent-sky)",    x: "8%",  y: "22%", s: 12 },
    { c: "var(--accent-purple)", x: "86%", y: "16%", s: 16 },
    { c: "var(--accent-orange)", x: "72%", y: "72%", s: 10 },
    { c: "var(--accent-green)",  x: "18%", y: "76%", s: 14 },
  ];
  return (
    <section style={{ background: "var(--secondary)", padding: "96px 32px", position: "relative", overflow: "hidden", textAlign: "center" }}>
      {stars.map((_, i) => (
        <span key={i} aria-hidden="true" style={{ position: "absolute", left: ((i * 53) % 100) + "%", top: ((i * 37) % 100) + "%", width: 2, height: 2, borderRadius: 9999, background: "rgba(255,255,255,0.35)" }}></span>
      ))}
      {glows.map((st, i) => (
        <span key={i} aria-hidden="true" style={{ position: "absolute", left: st.x, top: st.y, width: st.s * 2, height: st.s * 2, borderRadius: 9999, background: st.c, filter: "blur(0.5px)", boxShadow: "0 0 " + (st.s * 2) + "px " + st.c }}></span>
      ))}
      <div style={{ position: "relative", zIndex: 1, maxWidth: 640, margin: "0 auto" }}>
        <div style={{ display: "inline-block", background: "rgba(255,255,255,0.1)", borderRadius: "var(--rounded-full)", padding: "5px 18px", marginBottom: 24, fontSize: 12, fontWeight: 600, color: "rgba(255,255,255,0.7)", textTransform: "uppercase", letterSpacing: "0.75px" }}>Free Trial Available</div>
        <h2 style={{ margin: "0 0 16px", fontSize: 44, fontWeight: 700, color: "#fff", letterSpacing: "-1.5px", lineHeight: 1.05 }}>Start Your Child's Mathematics Success Journey</h2>
        <p style={{ margin: "0 0 36px", fontSize: 18, color: "rgba(255,255,255,0.72)", lineHeight: 1.5 }}>Join 5,000+ students worldwide who are excelling in mathematics with personalized expert tutoring.</p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
          <Button variant="primary" size="lg" onClick={() => window.__mmBook?.()}>Book Free Trial Class</Button>
          <Button variant="secondary" size="lg" onClick={() => window.__mmBook?.()}>Talk to an Advisor</Button>
        </div>
      </div>
    </section>
  );
}

function SiteFooter() {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);
  const [openAcc, setOpenAcc] = React.useState(null);

  React.useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth <= 768);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);

  const cols = [
    { title: "Services", items: [
      { label:"Online Tutoring", id:"services" },{ label:"Offline Coaching", id:"services" },
      { label:"Free Assessment", id:"contact-form" },{ label:"Study Plans", id:"how-it-works" },
      { label:"Parent Guidance", id:"testimonials" },
    ]},
    { title: "Curriculums", items: [
      { label:"IB Mathematics", id:"curriculum" },{ label:"IGCSE", id:"curriculum" },
      { label:"USA Curriculum", id:"curriculum" },{ label:"Australian Curriculum", id:"curriculum" },
      { label:"Canadian Curriculum", id:"curriculum" },{ label:"CBSE", id:"curriculum" },
    ]},
    { title: "Competitive Exams", items: [
      { label:"IIT JEE", id:"exams" },{ label:"SAT", id:"exams" },
      { label:"GATE", id:"exams" },{ label:"Olympiad", id:"exams" },{ label:"ACT", id:"exams" },
    ]},
    { title: "Company", items: [
      { label:"About JK Sir", id:"about" },{ label:"Success Stories", id:"testimonials" },
      { label:"Testimonials", id:"testimonials" },{ label:"FAQ", id:"faq" },{ label:"Contact", id:"contact-form" },
    ]},
  ];

  function scrollTo(id) {
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 80;
    window.scrollTo({ top, behavior: 'smooth' });
  }

  const countries = [
    { code:"us", name:"USA" },{ code:"ca", name:"Canada" },{ code:"au", name:"Australia" },
    { code:"ae", name:"UAE" },{ code:"hk", name:"Hong Kong" },{ code:"sg", name:"Singapore" },{ code:"in", name:"India" },
  ];

  const socials = [
    { label:"YouTube",   color:"#ff0000", href:"https://www.youtube.com/@MathMentor-y4y",
      icon:<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M23.5 6.2a3 3 0 00-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6a3 3 0 00-2.1 2.1C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 002.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 002.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.7 15.5V8.5l6.3 3.5-6.3 3.5z"/></svg> },
    { label:"Instagram",  color:"#e1306c", href:"https://www.instagram.com/mathmentorjksir/",
      icon:<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.2c3.2 0 3.6 0 4.9.1 3.3.2 4.8 1.7 5 5 .1 1.3.1 1.6.1 4.8 0 3.2 0 3.6-.1 4.8-.2 3.3-1.7 4.8-5 5-1.3.1-1.6.1-4.9.1-3.2 0-3.6 0-4.8-.1-3.3-.2-4.8-1.7-5-5C2.1 15.6 2 15.3 2 12c0-3.2 0-3.6.1-4.8.2-3.3 1.7-4.8 5-5C8.4 2.2 8.8 2.2 12 2.2zm0-2.2C8.7 0 8.3 0 7.1.1 2.7.3.3 2.7.1 7.1 0 8.3 0 8.7 0 12c0 3.3 0 3.7.1 4.9.2 4.4 2.6 6.8 7 7C8.3 24 8.7 24 12 24s3.7 0 4.9-.1c4.4-.2 6.8-2.6 7-7 .1-1.2.1-1.6.1-4.9 0-3.3 0-3.7-.1-4.9C23.7 2.7 21.3.3 16.9.1 15.7 0 15.3 0 12 0zm0 5.8a6.2 6.2 0 100 12.4A6.2 6.2 0 0012 5.8zm0 10.2a4 4 0 110-8 4 4 0 010 8zm6.4-11.8a1.4 1.4 0 100 2.8 1.4 1.4 0 000-2.8z"/></svg> },
    { label:"Facebook",  color:"#1877f2", href:"https://www.facebook.com/expolearn",
      icon:<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.04V9.41c0-3.02 1.8-4.7 4.54-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.95.93-1.95 1.88v2.27h3.32l-.53 3.5h-2.79V24C19.61 23.1 24 18.1 24 12.07z"/></svg> },
    { label:"LinkedIn",  color:"#0a66c2", href:"https://www.linkedin.com/in/jayesh-rawat-008b7b3a",
      icon:<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.37V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 110-4.12 2.06 2.06 0 010 4.12zM7.12 20.45H3.57V9h3.55v11.45zM22.22 0H1.77C.8 0 0 .77 0 1.73v20.54C0 23.23.8 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"/></svg> },
    { label:"WhatsApp",  color:"#25d366", href:"https://wa.me/919928793096",
      icon:<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M17.47 14.38c-.3-.15-1.77-.87-2.04-.97-.28-.1-.48-.15-.68.15-.2.3-.77.97-.95 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.76-1.66-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.68-1.63-.93-2.23-.24-.59-.49-.51-.68-.52-.17 0-.37-.01-.57-.01s-.52.07-.79.37c-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.87 1.22 3.07.15.2 2.1 3.21 5.09 4.5.71.31 1.26.49 1.7.63.71.23 1.36.19 1.87.12.57-.09 1.77-.73 2.02-1.43.24-.7.24-1.3.17-1.43-.07-.13-.27-.2-.57-.35zm-5.42 7.41h-.01A9.87 9.87 0 016.6 19.5l-.34-.2-3.52.92.94-3.43-.22-.35a9.88 9.88 0 01-1.52-5.27C1.94 5.95 6.5 1.4 12.06 1.4a9.83 9.83 0 016.99 2.9 9.83 9.83 0 012.9 6.99c-.01 5.56-4.56 10.1-10.1 10.1zm8.6-18.7A11.82 11.82 0 0012.05 0C5.42 0 .03 5.4.01 12.03a11.99 11.99 0 001.61 6.03L0 24l6.1-1.6a12.03 12.03 0 005.95 1.52h.01C17.68 23.92 23.07 18.52 23.09 11.9a11.83 11.83 0 00-3.44-8.81z"/></svg> },
  ];

  // ── MOBILE FOOTER ──────────────────────────────────────
  if (isMobile) {
    return (
      <footer style={{ background:"linear-gradient(160deg,#0c0520 0%,#1a0845 45%,#0f0c29 100%)", padding:"60px 20px 40px", color:"#fff", fontFamily:"var(--font-sans)" }}>
        {/* Logo + tagline */}
        <div style={{ textAlign:"center", marginBottom:32 }}>
          <img loading="lazy" decoding="async" src="uploads/logo new-1971c03b.jpg" alt="MathMentor by JK Sir" style={{ height:72, width:"auto", borderRadius:12, margin:"0 auto 14px" }} />
          <p style={{ margin:"0 0 6px", fontSize:11, fontWeight:700, color:"rgba(255,255,255,0.35)", textTransform:"uppercase", letterSpacing:"2px" }}>LEARN · SOLVE · SUCCEED</p>
          <p style={{ margin:"0 auto", fontSize:14, color:"rgba(255,255,255,0.55)", lineHeight:1.6, maxWidth:300 }}>
            Expert 1-to-1 online mathematics tutoring for students across IB, IGCSE, SAT, JEE, GATE and global curricula.
          </p>
        </div>

        {/* Contact block */}
        <div style={{ background:"rgba(255,255,255,0.06)", border:"1px solid rgba(255,255,255,0.10)", borderRadius:16, padding:"20px", marginBottom:24 }}>
          <p style={{ margin:"0 0 14px", fontSize:11, fontWeight:700, color:"rgba(255,255,255,0.35)", textTransform:"uppercase", letterSpacing:"1.5px" }}>Get in Touch</p>
          {[
            { icon:"📞", label:"+91 9928793096", href:"tel:+919928793096" },
            { icon:"✉", label:"jayeshrwt@gmail.com", href:"mailto:jayeshrwt@gmail.com" },
            { icon:"🌐", label:"Available Worldwide", href:null },
          ].map(c => (
            <div key={c.label} style={{ display:"flex", alignItems:"center", gap:10, marginBottom:10, lastChild:{marginBottom:0} }}>
              <span style={{ fontSize:16 }}>{c.icon}</span>
              {c.href
                ? <a href={c.href} style={{ fontSize:14, color:"rgba(255,255,255,0.75)", fontWeight:500 }}>{c.label}</a>
                : <span style={{ fontSize:14, color:"rgba(255,255,255,0.75)", fontWeight:500 }}>{c.label}</span>
              }
            </div>
          ))}
          {/* Country flags */}
          <div style={{ display:"flex", gap:6, flexWrap:"wrap", marginTop:12 }}>
            {countries.map(c => (
              <div key={c.code} style={{ display:"flex", alignItems:"center", gap:4, background:"rgba(255,255,255,0.07)", borderRadius:20, padding:"3px 8px" }}>
                <img loading="lazy" decoding="async" src={"https://flagcdn.com/w40/"+c.code+".png"} alt={c.name} style={{ width:14, borderRadius:2 }} />
                <span style={{ fontSize:10, color:"rgba(255,255,255,0.55)", fontWeight:500 }}>{c.name}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Accordion nav */}
        {cols.map((col, ci) => (
          <div key={col.title} style={{ borderBottom:"1px solid rgba(255,255,255,0.08)", marginBottom:0 }}>
            <button onClick={()=>setOpenAcc(openAcc===ci?null:ci)} style={{ width:"100%", background:"none", border:"none", cursor:"pointer", display:"flex", alignItems:"center", justifyContent:"space-between", padding:"16px 0", fontFamily:"var(--font-sans)" }}>
              <span style={{ fontSize:15, fontWeight:700, color:"rgba(255,255,255,0.85)" }}>{col.title}</span>
              <span style={{ fontSize:20, color:"rgba(255,255,255,0.4)", transform:openAcc===ci?"rotate(45deg)":"none", transition:"transform 200ms ease", display:"inline-block" }}>+</span>
            </button>
            {openAcc===ci && (
              <div style={{ paddingBottom:16, display:"flex", flexDirection:"column", gap:10 }}>
                {col.items.map(item => (
                  <button key={item.label} onClick={()=>scrollTo(item.id)} style={{ background:"none", border:"none", cursor:"pointer", textAlign:"left", padding:"0 0 0 8px", fontSize:14, color:"rgba(255,255,255,0.52)", fontFamily:"var(--font-sans)", borderLeft:"2px solid rgba(167,139,250,0.4)" }}>
                    {item.label}
                  </button>
                ))}
              </div>
            )}
          </div>
        ))}

        {/* App download */}
        <div style={{ marginTop:32, textAlign:"center" }}>
          <p style={{ margin:"0 0 12px", fontSize:13, fontWeight:600, color:"rgba(255,255,255,0.50)" }}>Download the App</p>
          <a href="https://clpdiy4.page.link/G24W" target="_blank" rel="noopener noreferrer" style={{ display:"inline-flex", alignItems:"center", gap:10, background:"linear-gradient(90deg,#7c3aed,#4f46e5)", borderRadius:12, padding:"12px 24px", textDecoration:"none", fontSize:15, fontWeight:700, color:"#fff" }}>
            📱 Download App
          </a>
        </div>

        {/* Socials */}
        <div style={{ display:"flex", gap:12, justifyContent:"center", marginTop:32 }}>
          {socials.map(s => (
            <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" title={s.label}
              style={{ width:42, height:42, borderRadius:"50%", background:"rgba(255,255,255,0.08)", border:"1px solid rgba(255,255,255,0.12)", display:"flex", alignItems:"center", justifyContent:"center", color:s.color, transition:"background 160ms ease, transform 160ms ease" }}
              onMouseEnter={e=>{e.currentTarget.style.background=s.color+"22";e.currentTarget.style.transform="translateY(-2px)";}}
              onMouseLeave={e=>{e.currentTarget.style.background="rgba(255,255,255,0.08)";e.currentTarget.style.transform="none";}}
            >{s.icon}</a>
          ))}
        </div>

        {/* Bottom */}
        <div style={{ marginTop:32, borderTop:"1px solid rgba(255,255,255,0.08)", paddingTop:20, textAlign:"center" }}>
          <p style={{ margin:"0 0 6px", fontSize:12, color:"rgba(255,255,255,0.35)" }}>© 2026 MathMentor by JK Sir. All Rights Reserved.</p>
          <div style={{ display:"flex", gap:16, justifyContent:"center", flexWrap:"wrap", marginBottom:10 }}>
            {["Privacy Policy","Terms & Conditions","Refund Policy"].map(l=>(
              <a key={l} href="#" onClick={e=>e.preventDefault()} title={l+" — Coming Soon"} style={{ fontSize:11, color:"rgba(255,255,255,0.30)", fontWeight:500 }}>{l}</a>
            ))}
          </div>
          <p style={{ margin:0, fontSize:11, color:"rgba(255,255,255,0.25)" }}>Made with ❤️ for Students Worldwide</p>
        </div>
      </footer>
    );
  }

  // ── DESKTOP FOOTER ─────────────────────────────────────
  return (
    <footer style={{ background:"linear-gradient(160deg,#0c0520 0%,#1a0845 45%,#0f0c29 100%)", color:"#fff", fontFamily:"var(--font-sans)", padding:"80px 48px 0", position:"relative", overflow:"hidden" }}>
      <div aria-hidden="true" style={{ position:"absolute",top:-120,left:-80,width:400,height:400,borderRadius:"50%",background:"radial-gradient(circle,rgba(124,58,237,0.12) 0%,transparent 70%)",pointerEvents:"none" }} />
      <div aria-hidden="true" style={{ position:"absolute",bottom:0,right:-60,width:320,height:320,borderRadius:"50%",background:"radial-gradient(circle,rgba(79,70,229,0.10) 0%,transparent 70%)",pointerEvents:"none" }} />

      <div style={{ maxWidth:"var(--container-max)", margin:"0 auto", position:"relative", zIndex:1 }}>
        <div style={{ display:"grid", gridTemplateColumns:"1.4fr 1fr 1fr 1fr 1fr", gap:40, marginBottom:56 }}>
          {/* Brand col */}
          <div>
            <img loading="lazy" decoding="async" src="uploads/logo new-1971c03b.jpg" alt="MathMentor by JK Sir" style={{ height:72, width:"auto", borderRadius:12, marginBottom:16 }} />
            <p style={{ margin:"0 0 6px", fontSize:10, fontWeight:700, color:"rgba(255,255,255,0.30)", textTransform:"uppercase", letterSpacing:"2px" }}>LEARN · SOLVE · SUCCEED</p>
            <p style={{ margin:"0 0 20px", fontSize:13, color:"rgba(255,255,255,0.50)", lineHeight:1.6 }}>
              Expert 1-to-1 online mathematics tutoring for students across IB, IGCSE, SAT, JEE, GATE and global curricula.
            </p>
            <div style={{ display:"flex", flexDirection:"column", gap:8, marginBottom:20 }}>
              {[
                { icon:"📞", label:"+91 9928793096", href:"tel:+919928793096" },
                { icon:"✉", label:"jayeshrwt@gmail.com", href:"mailto:jayeshrwt@gmail.com" },
                { icon:"🌐", label:"Available Worldwide", href:null },
              ].map(c=>(
                <div key={c.label} style={{ display:"flex", alignItems:"center", gap:8 }}>
                  <span style={{ fontSize:13 }}>{c.icon}</span>
                  {c.href
                    ? <a href={c.href} style={{ fontSize:12, color:"rgba(255,255,255,0.55)", fontWeight:500 }}>{c.label}</a>
                    : <span style={{ fontSize:12, color:"rgba(255,255,255,0.55)" }}>{c.label}</span>
                  }
                </div>
              ))}
            </div>
            <div style={{ display:"flex", gap:6, flexWrap:"wrap" }}>
              {countries.map(c=>(
                <div key={c.code} style={{ display:"flex", alignItems:"center", gap:4, background:"rgba(255,255,255,0.06)", borderRadius:20, padding:"3px 8px" }}>
                  <img loading="lazy" decoding="async" src={"https://flagcdn.com/w40/"+c.code+".png"} alt={c.name} style={{ width:14, borderRadius:2 }} />
                  <span style={{ fontSize:10, color:"rgba(255,255,255,0.45)" }}>{c.name}</span>
                </div>
              ))}
            </div>
          </div>
          {/* Nav cols */}
          {cols.map(col=>(
            <div key={col.title}>
              <h3 style={{ margin:"0 0 16px", fontSize:13, fontWeight:700, color:"rgba(255,255,255,0.70)", textTransform:"uppercase", letterSpacing:"0.8px" }}>{col.title}</h3>
              <ul style={{ listStyle:"none", padding:0, margin:0, display:"flex", flexDirection:"column", gap:8 }}>
                {col.items.map(item=>(
                  <li key={item.label}>
                    <a href={"#"+item.id} onClick={e=>{e.preventDefault();scrollTo(item.id);}} style={{ fontSize:13, color:"rgba(255,255,255,0.52)", textDecoration:"none", transition:"color 150ms ease, paddingLeft 150ms ease", display:"block", cursor:"pointer" }}
                      onMouseEnter={e=>{e.currentTarget.style.color="#a78bfa";e.currentTarget.style.paddingLeft="4px";}}
                      onMouseLeave={e=>{e.currentTarget.style.color="rgba(255,255,255,0.52)";e.currentTarget.style.paddingLeft="0";}}
                    >{item.label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* App download strip */}
        <div style={{ borderTop:"1px solid rgba(255,255,255,0.07)", paddingTop:28, paddingBottom:28, display:"flex", alignItems:"center", justifyContent:"space-between", flexWrap:"wrap", gap:16, marginBottom:0 }}>
          <div>
            <p style={{ margin:"0 0 4px", fontSize:14, fontWeight:700, color:"rgba(255,255,255,0.80)" }}>Download the MathMentor App</p>
            <p style={{ margin:0, fontSize:12, color:"rgba(255,255,255,0.40)" }}>Live classes, recorded lectures, practice tests — all in one app.</p>
          </div>
          <a href="https://clpdiy4.page.link/G24W" target="_blank" rel="noopener noreferrer" style={{ display:"inline-flex", alignItems:"center", gap:8, background:"linear-gradient(90deg,#7c3aed,#4f46e5)", borderRadius:12, padding:"10px 22px", textDecoration:"none", fontSize:14, fontWeight:700, color:"#fff", boxShadow:"0 4px 16px rgba(124,58,237,0.30)" }}>
            📱 Download App
          </a>
        </div>

        {/* Socials + bottom bar */}
        <div style={{ borderTop:"1px solid rgba(255,255,255,0.07)", padding:"22px 0", display:"flex", alignItems:"center", justifyContent:"space-between", flexWrap:"wrap", gap:16 }}>
          <p style={{ margin:0, fontSize:12, color:"rgba(255,255,255,0.28)" }}>© 2026 MathMentor by JK Sir. All Rights Reserved.</p>
          <div style={{ display:"flex", gap:8 }}>
            {socials.map(s=>(
              <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" title={s.label}
                style={{ width:36, height:36, borderRadius:"50%", background:"rgba(255,255,255,0.07)", border:"1px solid rgba(255,255,255,0.10)", display:"flex", alignItems:"center", justifyContent:"center", color:s.color, transition:"background 160ms ease, transform 160ms ease" }}
                onMouseEnter={e=>{e.currentTarget.style.background=s.color+"22";e.currentTarget.style.transform="translateY(-2px)";}}
                onMouseLeave={e=>{e.currentTarget.style.background="rgba(255,255,255,0.07)";e.currentTarget.style.transform="none";}}
              >{s.icon}</a>
            ))}
          </div>
          <div style={{ display:"flex", gap:20 }}>
            {["Privacy Policy","Terms & Conditions","Refund Policy"].map(l=>(
              <a key={l} href="#" onClick={e=>e.preventDefault()} title={l+" — Coming Soon"} style={{ fontSize:11, color:"rgba(255,255,255,0.28)", fontWeight:500, transition:"color 120ms" }}
                onMouseEnter={e=>e.currentTarget.style.color="#a78bfa"}
                onMouseLeave={e=>e.currentTarget.style.color="rgba(255,255,255,0.28)"}
              >{l}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { WhyChooseSection, HowItWorksSection, AppDownloadSection, TutorSection, ResultsSection, TestimonialsSection, ContactFormSection, FAQSection, CTASection, SiteFooter });