// mm-sections-1.jsx — CustomNav, HeroSection, StatsSection, ServicesSection, CurriculumSection, ExamsSection

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

function CustomNav() {
  const [open, setOpen] = React.useState(false);
  const links = [
    { label: "Online Tutoring", id: "services" },
    { label: "Curriculums",     id: "curriculum" },
    { label: "Exams",           id: "exams" },
    { label: "About",           id: "about" },
    { label: "Contact",         id: "contact-form" },
  ];
  const scroll = (id) => {
    setOpen(false);
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 70, behavior: 'smooth' });
  };
  return (
    <>
      <nav role="navigation" aria-label="Main navigation" style={{ position:"sticky", top:0, zIndex:100, background:"var(--canvas)", borderBottom:"1px solid var(--hairline)", fontFamily:"var(--font-sans)" }}>
        <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", padding:"8px 32px" }} className="nav-inner">
          <a href="#" onClick={e=>{e.preventDefault();window.scrollTo({top:0,behavior:"smooth"});}} aria-label="MathMentor — Back to top" style={{ display:"flex", alignItems:"center", flexShrink:0 }}>
            <img loading="eager" fetchpriority="high" decoding="sync" src="uploads/watermark-sm.png" alt="MathMentor by JK Sir — Online Mathematics Tutoring" style={{ height:52, width:"auto" }} />
          </a>
          {/* Desktop links */}
          <div className="nav-links" style={{ display:"flex", alignItems:"center", gap:28 }}>
            {links.map(l => (
              <a key={l.label} href={"#"+l.id} onClick={e=>{e.preventDefault();scroll(l.id);}} style={{ fontSize:15, color:"var(--ink-secondary)", fontWeight:500, cursor:"pointer", transition:"color 120ms" }}
                onMouseEnter={e=>e.currentTarget.style.color="#7c3aed"}
                onMouseLeave={e=>e.currentTarget.style.color="var(--ink-secondary)"}
              >{l.label}</a>
            ))}
          </div>
          <div style={{ display:"flex", alignItems:"center", gap:12, flexShrink:0 }}>
            <a href="tel:+919928793096" className="nav-phone" style={{ fontSize:13, color:"var(--ink-muted)", fontWeight:500 }}>+91 99287 93096</a>
            <Button variant="primary" size="sm" onClick={() => window.__mmBook?.()}>Book Free Trial</Button>
            {/* Hamburger */}
            <button className="hamburger" onClick={()=>setOpen(o=>!o)} aria-label="Toggle menu" aria-expanded={open} style={{ display:"none", background:"none", border:"none", cursor:"pointer", padding:6, flexShrink:0 }}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--ink-95)" strokeWidth="2.2" strokeLinecap="round">
                {open ? (<><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>) : (<><line x1="3" y1="7" x2="21" y2="7"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="17" x2="21" y2="17"/></>)}
              </svg>
            </button>
          </div>
        </div>
        {/* Mobile drawer */}
        {open && (
          <div style={{ background:"var(--canvas)", borderTop:"1px solid var(--hairline)", padding:"12px 20px 20px", display:"flex", flexDirection:"column", gap:4, boxShadow:"0 8px 24px rgba(0,0,0,0.08)" }}>
            {links.map(l => (
              <button key={l.label} onClick={()=>scroll(l.id)} style={{ background:"none", border:"none", cursor:"pointer", textAlign:"left", padding:"12px 8px", fontSize:16, fontWeight:600, color:"var(--ink-secondary)", fontFamily:"var(--font-sans)", borderBottom:"1px solid var(--hairline)", display:"flex", alignItems:"center", justifyContent:"space-between" }}>
                {l.label}<span style={{ fontSize:18, color:"var(--ink-faint)" }}>›</span>
              </button>
            ))}
            <a href="tel:+919928793096" style={{ marginTop:8, display:"flex", alignItems:"center", gap:8, fontSize:14, color:"var(--ink-muted)", fontWeight:500, padding:"8px 8px" }}>
              📞 +91 99287 93096
            </a>
            <button onClick={()=>{setOpen(false);window.__mmBook?.();}} style={{ marginTop:8, padding:"14px 24px", background:"linear-gradient(90deg,#7c3aed,#4f46e5)", border:"none", borderRadius:12, fontSize:16, fontWeight:700, color:"#fff", cursor:"pointer", fontFamily:"var(--font-sans)" }}>
              Book Free Assessment
            </button>
          </div>
        )}
      </nav>
      {/* Mobile sticky bottom bar */}
      <div className="mobile-sticky-bar" style={{ display:"none", position:"fixed", bottom:0, left:0, right:0, zIndex:99, background:"var(--canvas)", borderTop:"1px solid var(--hairline)", padding:"10px 16px", gap:10, boxShadow:"0 -4px 20px rgba(0,0,0,0.10)" }}>
        <a href="https://wa.me/919928793096" target="_blank" rel="noopener noreferrer" style={{ flex:1, display:"flex", alignItems:"center", justifyContent:"center", gap:8, background:"#25d366", borderRadius:12, padding:"12px 0", fontSize:15, fontWeight:700, color:"#fff", textDecoration:"none" }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="white"><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>
          WhatsApp
        </a>
        <button onClick={()=>window.__mmBook?.()} style={{ flex:1, display:"flex", alignItems:"center", justifyContent:"center", background:"linear-gradient(90deg,#7c3aed,#4f46e5)", border:"none", borderRadius:12, padding:"12px 0", fontSize:15, fontWeight:700, color:"#fff", cursor:"pointer", fontFamily:"var(--font-sans)" }}>
          Book Free Class
        </button>
      </div>
    </>
  );
}

function HeroSection() {
  const scrollToAbout = () => {
    const el = document.getElementById('about');
    if (el) { const top = el.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top, behavior: 'smooth' }); }
  };

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

  const badges = [
    { icon: "👨‍🎓", grad: "linear-gradient(135deg,#7c3aed,#4f46e5)", stat: "5,000+", label: "Students Mentored" },
    { icon: "🌍",  grad: "linear-gradient(135deg,#0075de,#0ea5e9)", stat: "15+",    label: "Countries Served" },
    { icon: "🏆",  grad: "linear-gradient(135deg,#f59e0b,#ef4444)", stat: "14+",    label: "Years Experience" },
    { icon: "⭐",  grad: "linear-gradient(135deg,#f59e0b,#fbbf24)", stat: "98%",    label: "Success Rate" },
    { icon: "📚",  grad: "linear-gradient(135deg,#7c3aed,#ec4899)", stat: "6+",     label: "Curriculums" },
    { icon: "💻",  grad: "linear-gradient(135deg,#0d9488,#4f46e5)", stat: "Live",   label: "1-on-1 Classes" },
    { icon: "🎯",  grad: "linear-gradient(135deg,#1d4ed8,#7c3aed)", stat: "Exams",  label: "SAT · ACT · JEE" },
    { icon: "🕒",  grad: "linear-gradient(135deg,#0d9488,#0075de)", stat: "Flex",   label: "Time Zones" },
  ];

  return (
    <section style={{
      background: "linear-gradient(135deg, #0c0520 0%, #1a0845 20%, #2d1b69 48%, #1e1040 72%, #0a0318 100%)",
      padding: "80px 48px 88px",
      position: "relative",
      overflow: "hidden",
      minHeight: 640,
    }}>
      {/* Blobs */}
      <div aria-hidden="true" style={{ position:"absolute", top:-160, left:-180, width:560, height:560, borderRadius:"50%", background:"radial-gradient(circle, rgba(139,92,246,0.30) 0%, transparent 68%)", pointerEvents:"none" }} />
      <div aria-hidden="true" style={{ position:"absolute", top:60, right:-200, width:640, height:640, borderRadius:"50%", background:"radial-gradient(circle, rgba(109,40,217,0.22) 0%, transparent 68%)", pointerEvents:"none" }} />
      <div aria-hidden="true" style={{ position:"absolute", bottom:-180, left:"28%", width:500, height:500, borderRadius:"50%", background:"radial-gradient(circle, rgba(79,70,229,0.18) 0%, transparent 68%)", pointerEvents:"none" }} />
      <div aria-hidden="true" style={{ position:"absolute", bottom:0, right:"10%", width:300, height:300, borderRadius:"50%", background:"radial-gradient(circle, rgba(167,139,250,0.14) 0%, transparent 68%)", pointerEvents:"none" }} />

      {/* Math pattern SVG */}
      <svg role="presentation" aria-hidden="true" focusable="false" style={{ position:"absolute", inset:0, width:"100%", height:"100%", opacity:0.045, pointerEvents:"none" }} viewBox="0 0 1300 700" preserveAspectRatio="xMidYMid slice">
        {[0,130,260,390,520,650,780,910,1040,1170,1300].map(x => <line key={x} x1={x} y1="0" x2={x} y2="700" stroke="white" strokeWidth="0.5"/>)}
        {[0,100,200,300,400,500,600,700].map(y => <line key={y} x1="0" y1={y} x2="1300" y2={y} stroke="white" strokeWidth="0.5"/>)}
        <path d="M 660 650 Q 780 160 1000 480" stroke="white" strokeWidth="1.5" fill="none"/>
        <path d="M 40 500 Q 180 80 380 420" stroke="white" strokeWidth="1" fill="none"/>
        <circle cx="680" cy="80" r="55" stroke="white" strokeWidth="0.8" fill="none"/>
        <text x="840" y="130" fill="white" fontSize="20" fontFamily="Georgia,serif">∫f(x)dx</text>
        <text x="80" y="190" fill="white" fontSize="15" fontFamily="Georgia,serif">y = ax² + bx + c</text>
        <text x="1060" y="380" fill="white" fontSize="17" fontFamily="Georgia,serif">∑(1/n²)</text>
        <text x="280" y="620" fill="white" fontSize="14" fontFamily="Georgia,serif">lim f(x) = L</text>
        <text x="500" y="550" fill="white" fontSize="13" fontFamily="Georgia,serif">√(a²+b²)</text>
      </svg>

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

        {/* ROW 1: Two-column */}
        <div className="hero-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 56, alignItems: "center" }}>

          {/* LEFT: Text */}
          <div>
            {/* Country flag pills */}
            <div style={{ display: "flex", gap: 7, flexWrap: "wrap", marginBottom: 30 }}>
              {countries.map(c => (
                <div key={c.code} style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.13)", borderRadius: "var(--rounded-full)", padding: "4px 12px", fontSize: 12, fontWeight: 600, color: "rgba(255,255,255,0.82)" }}>
                  <img loading="lazy" decoding="async" src={"https://flagcdn.com/w40/" + c.code + ".png"} alt={c.name} width="17" height="13" style={{ width: 17, height: "auto", borderRadius: 2, flexShrink: 0 }} />
                  {c.name}
                </div>
              ))}
            </div>

            {/* Headline */}
            <h1 style={{ margin: "0 0 20px", fontSize: "clamp(36px,4vw,60px)", fontWeight: 800, color: "#fff", letterSpacing: "-2px", lineHeight: 1.05, fontFamily: "var(--font-sans)" }}>
              Building Confident<br />
              <span style={{ background: "linear-gradient(90deg, #a78bfa 0%, #67e8f9 100%)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text", MozBackgroundClip: "text" }}>
                Mathematicians
              </span><br />
              Across the Globe
            </h1>

            {/* Subheading */}
            <p style={{ margin: "0 0 32px", fontSize: 17, color: "rgba(255,255,255,0.68)", lineHeight: 1.65, maxWidth: 480 }}>
              Live 1-to-1 online mathematics tutoring for IB, IGCSE, American, Australian, Canadian, CBSE, SAT, IIT JEE, and GATE students — tailored to every learner's goals and curriculum.
            </p>

            {/* CTAs */}
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginBottom: 0 }}>
              <Button variant="primary" size="lg" onClick={() => window.__mmBook?.()}>Book Free Assessment</Button>
              <button onClick={scrollToAbout} style={{ padding: "12px 22px", background: "rgba(255,255,255,0.09)", border: "1px solid rgba(255,255,255,0.20)", borderRadius: "var(--rounded-full)", fontSize: 15, fontWeight: 600, color: "rgba(255,255,255,0.88)", cursor: "pointer", fontFamily: "var(--font-sans)", transition: "background 150ms" }}>
                Meet Our Mentor →
              </button>
            </div>
          </div>

          {/* RIGHT: Live session card */}
          <div style={{ position: "relative" }}>
            <div style={{ background: "rgba(255,255,255,0.06)", backdropFilter: "blur(24px)", WebkitBackdropFilter: "blur(24px)", border: "1px solid rgba(255,255,255,0.11)", borderRadius: 20, overflow: "hidden", boxShadow: "0 40px 100px rgba(0,0,0,0.55)", position: "relative", zIndex: 5 }}>
              {/* Card header */}
              <div style={{ padding: "11px 18px", borderBottom: "1px solid rgba(255,255,255,0.07)", display: "flex", alignItems: "center", justifyContent: "space-between", background: "rgba(0,0,0,0.15)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#22c55e", boxShadow: "0 0 8px rgba(34,197,94,0.8)" }}></span>
                  <span style={{ fontSize: 13, fontWeight: 600, color: "rgba(255,255,255,0.85)" }}>Live 1-to-1 Session</span>
                  <span style={{ marginLeft: 4, fontSize: 11, background: "rgba(34,197,94,0.15)", border: "1px solid rgba(34,197,94,0.3)", color: "#86efac", borderRadius: 20, padding: "1px 8px", fontWeight: 600 }}>REC</span>
                </div>
                <div style={{ display: "flex", gap: 5 }}>
                  {["rgba(255,255,255,0.12)", "rgba(255,255,255,0.12)", "#ef4444"].map((bg, i) => (
                    <span key={i} style={{ width: 10, height: 10, borderRadius: "50%", background: bg, display: "inline-block" }} />
                  ))}
                </div>
              </div>
              {/* Session body */}
              <div className="hero-session-body" style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr" }}>
                {/* Tutor pane */}
                <div style={{ position: "relative", minHeight: 250, overflow: "hidden", borderRight: "1px solid rgba(255,255,255,0.07)" }}>
                  <img loading="eager" fetchpriority="high" decoding="sync" src="uploads/crop-sm.png" alt="JK Sir" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top center", display: "block", minHeight: 250 }} />
                  <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%)" }} />
                  <div style={{ position: "absolute", bottom: 10, left: 10, background: "rgba(0,0,0,0.55)", backdropFilter: "blur(10px)", WebkitBackdropFilter: "blur(10px)", borderRadius: 8, padding: "4px 10px", fontSize: 11, fontWeight: 600, color: "#fff" }}>JK Sir · Tutor</div>
                </div>
                {/* Whiteboard pane */}
                <div style={{ padding: "16px", background: "rgba(0,0,0,0.18)" }}>
                  <div style={{ fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.30)", textTransform: "uppercase", letterSpacing: "0.6px", marginBottom: 10 }}>Interactive Whiteboard</div>
                  <div style={{ background: "#130d30", borderRadius: 10, padding: "14px 16px", border: "1px solid rgba(255,255,255,0.07)" }}>
                    <div style={{ fontSize: 14, color: "#e2e8f0", marginBottom: 8, fontFamily: "Georgia, serif" }}>f(x) = ax² + bx + c</div>
                    <svg viewBox="0 0 200 85" style={{ width: "100%", marginBottom: 10 }}>
                      <line x1="10" y1="75" x2="190" y2="75" stroke="rgba(255,255,255,0.15)" strokeWidth="1"/>
                      <line x1="100" y1="5" x2="100" y2="80" stroke="rgba(255,255,255,0.15)" strokeWidth="1"/>
                      <path d="M10,75 Q100,0 190,75" stroke="#a78bfa" strokeWidth="2" fill="none"/>
                      <circle cx="100" cy="8" r="3" fill="#f59e0b"/>
                      <text x="106" y="16" fill="#f59e0b" fontSize="8" fontFamily="sans-serif">vertex</text>
                    </svg>
                    <div style={{ fontSize: 12, color: "#94a3b8", marginBottom: 5, fontFamily: "Georgia, serif" }}>b² − 4ac = discriminant</div>
                    <div style={{ fontSize: 12, color: "#67e8f9", fontFamily: "Georgia, serif" }}>∫₀¹ x² dx = <strong style={{ color: "#fff" }}>1/3</strong></div>
                  </div>
                </div>
              </div>
              {/* Toolbar */}
              <div style={{ padding: "9px 16px", borderTop: "1px solid rgba(255,255,255,0.07)", display: "flex", alignItems: "center", justifyContent: "space-between", background: "rgba(0,0,0,0.12)" }}>
                <div style={{ display: "flex", gap: 7 }}>
                  {[["🎤","Mic"],["📷","Cam"],["✏️","Draw"],["💬","Chat"]].map(([ic, label]) => (
                    <button key={label} title={label} style={{ width: 30, height: 30, borderRadius: "50%", background: "rgba(255,255,255,0.09)", border: "1px solid rgba(255,255,255,0.10)", fontSize: 12, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>{ic}</button>
                  ))}
                </div>
                <button style={{ padding: "5px 14px", background: "#ef4444", border: "none", borderRadius: 20, fontSize: 11, fontWeight: 700, color: "#fff", cursor: "pointer", fontFamily: "var(--font-sans)" }}>End Session</button>
              </div>
            </div>
            {/* Curriculum chips */}
            <div style={{ display: "flex", gap: 8, marginTop: 16, flexWrap: "wrap" }}>
              {[{ dot: "#3b82f6", label: "USA Curriculum" }, { dot: "#a855f7", label: "IB Mathematics" }, { dot: "#14b8a6", label: "IGCSE" }, { dot: "#ef4444", label: "JEE Advanced" }].map(fc => (
                <div key={fc.label} style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "rgba(255,255,255,0.07)", border: "1px solid rgba(255,255,255,0.11)", borderRadius: "var(--rounded-md)", padding: "6px 12px" }}>
                  <span style={{ width: 7, height: 7, borderRadius: "50%", background: fc.dot, flexShrink: 0 }} />
                  <span style={{ fontSize: 12, fontWeight: 600, color: "rgba(255,255,255,0.78)" }}>{fc.label}</span>
                </div>
              ))}
            </div>
          </div>

        </div>

        {/* ROW 2: 8 compact stat badges */}
        <div className="hero-badges" style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: 10 }}>
          {badges.map(b => (
            <div key={b.label}
              style={{ display: "flex", alignItems: "center", gap: 9, background: "rgba(255,255,255,0.07)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,0.12)", borderRadius: 16, padding: "10px 14px", boxShadow: "0 4px 16px rgba(0,0,0,0.2)", transition: "background 160ms ease, transform 160ms ease" }}
              onMouseEnter={e => { e.currentTarget.style.background = "rgba(255,255,255,0.13)"; e.currentTarget.style.transform = "translateY(-3px)"; }}
              onMouseLeave={e => { e.currentTarget.style.background = "rgba(255,255,255,0.07)"; e.currentTarget.style.transform = "none"; }}
            >
              <div style={{ width: 32, height: 32, borderRadius: 9, background: b.grad, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16, flexShrink: 0 }}>{b.icon}</div>
              <div>
                {b.stat && <div style={{ fontSize: 15, fontWeight: 800, color: "#fff", lineHeight: 1, letterSpacing: "-0.5px" }}>{b.stat}</div>}
                <div style={{ fontSize: 11, color: "rgba(255,255,255,0.65)", fontWeight: 500, marginTop: b.stat ? 2 : 0 }}>{b.label}</div>
              </div>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

function TrustedSection() {
  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 stats = [
    { number: "5,000+", label: "Students Taught" },
    { number: "15+",    label: "Countries Served" },
    { number: "14+",    label: "Years Experience" },
    { number: "98%",    label: "Student Success Rate" },
  ];
  return (
    <section style={{ background: "var(--canvas)", borderBottom: "1px solid var(--hairline)", padding: "52px 32px 0" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto" }}>
        <p style={{ textAlign: "center", fontSize: 12, fontWeight: 700, color: "var(--ink-faint)", textTransform: "uppercase", letterSpacing: "0.7px", marginBottom: 20, marginTop: 0 }}>Trusted by Students Across the World</p>
        <div style={{ display: "flex", justifyContent: "center", gap: 8, flexWrap: "wrap", marginBottom: 44 }}>
          {countries.map(c => (
            <div key={c.name} style={{ display: "flex", alignItems: "center", gap: 7, background: "var(--canvas-soft)", border: "1px solid var(--hairline)", borderRadius: "var(--rounded-full)", padding: "6px 16px", fontSize: 13, fontWeight: 600, color: "var(--ink-secondary)" }}>
              <img loading="lazy" decoding="async" src={`https://flagcdn.com/w40/${c.code}.png`} alt={c.name} style={{ width: 20, height: "auto", borderRadius: 2, boxShadow: "0 1px 2px rgba(0,0,0,0.12)" }} />
              {c.name}
            </div>
          ))}
        </div>
        <div className="grid-stats" style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 32px", display: "grid", gridTemplateColumns: "repeat(4, 1fr)" }}>
          {stats.map((s, i) => (
            <div key={s.label} style={{ textAlign: "center", padding: "28px 16px", borderRight: i < stats.length - 1 ? "1px solid var(--hairline)" : "none" }}>
              <div style={{ fontSize: 40, fontWeight: 700, color: "var(--primary)", letterSpacing: "-1.5px", lineHeight: 1, marginBottom: 6 }}>{s.number}</div>
              <div style={{ fontSize: 14, color: "var(--ink-muted)" }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}


function StatsHighlightSection() {
  const cards = [
    { icon: "👨‍🎓", grad: "linear-gradient(135deg,#7c3aed,#4f46e5)", stat: "5,000+",    title: "Students Mentored",           body: "Helping students achieve academic excellence worldwide." },
    { icon: "🌍", grad: "linear-gradient(135deg,#0075de,#0ea5e9)", stat: "15+",       title: "Countries Served",            body: "USA, Canada, Australia, UAE, Hong Kong, Singapore, India and more." },
    { icon: "👨‍🏫", grad: "linear-gradient(135deg,#0d9488,#10b981)", stat: "14+",       title: "Years of Teaching Experience", body: "International mathematics educator with proven results." },
    { icon: "⭐", grad: "linear-gradient(135deg,#f59e0b,#ef4444)", stat: "98%",       title: "Student Success Rate",        body: "Consistent improvement in grades, confidence and exam performance." },
    { icon: "📚", grad: "linear-gradient(135deg,#7c3aed,#ec4899)", stat: null,        title: "Multiple Curriculums",        body: "IB • IGCSE • USA • Australian • Canadian • CBSE" },
    { icon: "🎯", grad: "linear-gradient(135deg,#1d4ed8,#7c3aed)", stat: null,        title: "Competitive Exam Experts",    body: "IIT JEE • SAT • GATE • ACT • Olympiad" },
    { icon: "💻", grad: "linear-gradient(135deg,#0d9488,#4f46e5)", stat: null,        title: "Live 1-to-1 Online Classes",  body: "Interactive sessions with recordings, assignments and doubt solving." },
    { icon: "📈", grad: "linear-gradient(135deg,#16a34a,#0d9488)", stat: null,        title: "Personalized Learning Plans", body: "Every student receives a customized roadmap based on goals and learning style." },
  ];

  return (
    <section style={{ background: "linear-gradient(135deg,#faf8ff 0%,#f0ebff 50%,#ebf4ff 100%)", padding: "72px 48px", position: "relative", overflow: "hidden" }}>
      <div aria-hidden="true" style={{ position:"absolute", top:-60, left:-40, width:300, height:300, 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:-40, right:-40, width:280, height:280, borderRadius:"50%", background:"radial-gradient(circle,rgba(79,70,229,0.07) 0%,transparent 70%)", pointerEvents:"none" }} />
      {["∑","π","∫"].map((s,i) => (
        <div key={i} aria-hidden="true" style={{ position:"absolute", fontSize:80, color:"rgba(124,58,237,0.04)", fontFamily:"Georgia,serif", left:[5,80,45][i]+"%", top:[10,55,80][i]+"%", pointerEvents:"none", userSelect:"none" }}>{s}</div>
      ))}

      <div style={{ maxWidth:"var(--container-max)", margin:"0 auto", position:"relative", zIndex:1 }}>
        <div className="stats-grid" style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:18 }}>
          {cards.map(c => (
            <div key={c.title}
              style={{ background:"#fff", borderRadius:20, padding:"22px 20px", border:"1px solid rgba(124,58,237,0.08)", boxShadow:"0 4px 16px rgba(0,0,0,0.06)", transition:"transform 200ms ease,box-shadow 200ms ease", cursor:"default" }}
              onMouseEnter={e=>{ e.currentTarget.style.transform="translateY(-6px)"; e.currentTarget.style.boxShadow="0 16px 40px rgba(124,58,237,0.14)"; }}
              onMouseLeave={e=>{ e.currentTarget.style.transform="none"; e.currentTarget.style.boxShadow="0 4px 16px rgba(0,0,0,0.06)"; }}
            >
              <div style={{ width:48, height:48, borderRadius:14, background:c.grad, display:"flex", alignItems:"center", justifyContent:"center", fontSize:22, marginBottom:14, boxShadow:"0 6px 16px rgba(124,58,237,0.18)" }}>{c.icon}</div>
              {c.stat && <div style={{ fontSize:36, fontWeight:800, color:"var(--ink-95)", letterSpacing:"-1.5px", lineHeight:1, marginBottom:4 }}>{c.stat}</div>}
              <h3 style={{ margin:"0 0 8px", fontSize:15, fontWeight:700, color:"var(--ink-95)", letterSpacing:"-0.2px", lineHeight:1.3 }}>{c.title}</h3>
              <p style={{ margin:0, fontSize:13, color:"var(--ink-muted)", lineHeight:1.6 }}>{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServicesSection() {
  return (
    <section id="services" style={{ background: "var(--canvas-soft)", padding: "80px 32px" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <Badge>Our Learning Modes</Badge>
          <h2 className="mm-heading-1" style={{ margin: "14px 0 12px", color: "var(--ink-95)" }}>Online &amp; Offline Learning</h2>
          <p style={{ margin: "0 auto", fontSize: 16, color: "var(--ink-muted)", maxWidth: 500, lineHeight: 1.55 }}>
            Flexible mathematics tutoring designed around your schedule, location, and learning style.
          </p>
        </div>
        <div className="grid-svc" style={{ display: "grid", gridTemplateColumns: "1.35fr 1fr", gap: 24 }}>
          <Card variant="elevated" padding="0" style={{ overflow: "hidden" }}>
            <div style={{ background: "var(--secondary)", padding: "36px 40px" }}>
              <div style={{ display: "inline-flex", alignItems: "center", background: "rgba(255,255,255,0.12)", borderRadius: "var(--rounded-full)", padding: "4px 14px", marginBottom: 18, fontSize: 12, fontWeight: 600, color: "rgba(255,255,255,0.8)" }}>● Primary Service</div>
              <h3 style={{ margin: "0 0 10px", fontSize: 26, fontWeight: 700, color: "#fff", letterSpacing: "-0.5px" }}>Online Mathematics Tutoring</h3>
              <p style={{ margin: 0, fontSize: 16, color: "rgba(255,255,255,0.72)", lineHeight: 1.55 }}>Live 1-to-1 interactive classes from anywhere in the world. Expert tutors, flexible timing, personalized learning plans.</p>
            </div>
            <div style={{ padding: "28px 40px 36px" }}>
              {["Live 1-to-1 Interactive Classes", "Flexible Timing Across Time Zones", "Available Globally — Any Country", "Personalized Study Plans", "Online Doubt Support", "Regular Progress Reports"].map(f => (
                <div key={f} style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
                  <span style={{ color: "var(--accent-green)", fontWeight: 700 }}>✓</span>
                  <span style={{ fontSize: 15, color: "var(--ink-secondary)" }}>{f}</span>
                </div>
              ))}
              <div style={{ marginTop: 28 }}><Button variant="primary" onClick={() => window.__mmBook?.()}>Book Free Assessment</Button></div>
            </div>
          </Card>
          <Card variant="feature" padding="0">
            <div style={{ background: "var(--canvas-soft)", padding: "36px 32px", borderBottom: "1px solid var(--hairline)" }}>
              <div style={{ display: "inline-flex", alignItems: "center", background: "var(--hairline)", borderRadius: "var(--rounded-full)", padding: "4px 14px", marginBottom: 18, fontSize: 12, fontWeight: 600, color: "var(--ink-muted)" }}>● Selected Locations</div>
              <h3 style={{ margin: "0 0 10px", fontSize: 22, fontWeight: 700, color: "var(--ink-95)", letterSpacing: "-0.4px" }}>Offline Mathematics Classes</h3>
              <p style={{ margin: 0, fontSize: 15, color: "var(--ink-muted)", lineHeight: 1.55 }}>In-person tutoring for local students. Classroom experience with structured, results-focused learning.</p>
            </div>
            <div style={{ padding: "24px 32px 32px" }}>
              {["Classroom Learning Environment", "Local In-Person Support", "Group Learning Options", "Structured Weekly Schedule"].map(f => (
                <div key={f} style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
                  <span style={{ color: "var(--accent-teal)", fontWeight: 700 }}>✓</span>
                  <span style={{ fontSize: 14, color: "var(--ink-secondary)" }}>{f}</span>
                </div>
              ))}
              <div style={{ marginTop: 24 }}><Button variant="utility" onClick={() => window.__mmBook?.()}>Enquire About Locations</Button></div>
            </div>
          </Card>
        </div>
      </div>
    </section>
  );
}

function CurriculumSection() {
  const curricula = [
    {
      accent: "#7c3aed", flag: null, globe: true,
      title: "IB Mathematics",      country: "International Baccalaureate",
      desc: "Rigorous international programme developing analytical thinkers ready for top universities worldwide.",
      features: ["IB Math AA — Analysis & Approaches", "IB Math AI — Applications & Interpretation", "Internal Assessment (IA) Support", "Theory of Knowledge links"],
      trust: "International",
    },
    {
      accent: "#1e3a8a", flag: "gb",
      title: "IGCSE Mathematics",   country: "Cambridge Curriculum",
      desc: "Cambridge-aligned tutoring building strong mathematical foundations for GCSE and A-Level success.",
      features: ["Core & Extended Mathematics", "Cambridge Exam Preparation", "Concept Mastery", "Past Paper Practice"],
      trust: "University Pathway",
    },
    {
      accent: "#1d4ed8", flag: "us",
      title: "USA Curriculum",      country: "United States",
      desc: "Helping students master school mathematics while preparing for AP Calculus and SAT university success.",
      features: ["Common Core Mathematics", "Middle & High School Math", "Pre-Calculus", "AP Calculus AB & BC", "SAT Math Preparation"],
      trust: "Most Popular",
    },
    {
      accent: "#15803d", flag: "au",
      title: "Australian Curriculum", country: "Australia",
      desc: "Year-level aligned tutoring for ATAR, HSC and VCE success with personalized learning plans.",
      features: ["Australian Math Curriculum", "Year 7–12 Support", "ATAR / HSC Preparation", "Year-wise Learning Plans"],
      trust: "Personalized",
    },
    {
      accent: "#b45309", flag: "ca",
      title: "Canadian Curriculum",  country: "Canada",
      desc: "Provincial curriculum support covering Grades 7–12 with a focus on conceptual understanding.",
      features: ["Provincial Curriculum Support", "Grades 7–12 Mathematics", "Homework & Exam Help", "University Math Prep"],
      trust: "Personalized",
    },
    {
      accent: "#b91c1c", flag: "in",
      title: "CBSE Mathematics",    country: "India / Global",
      desc: "Class 6–12 board exam preparation with concept-first teaching and comprehensive practice.",
      features: ["Class 6–12 Mathematics", "Board Exam Preparation", "Concept Building", "Practice Tests & Mock Papers"],
      trust: "Exam Focused",
    },
  ];

  return (
    <section id="curriculum" style={{ background: "#fff", padding: "88px 48px" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto" }}>

        {/* Header */}
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 7, background: "#f0fdf4", border: "1px solid #bbf7d0", borderRadius: "var(--rounded-full)", padding: "5px 16px", marginBottom: 18, fontSize: 13, fontWeight: 600, color: "#15803d" }}>
            🌍 Trusted Across Global Curriculums
          </div>
          <h2 style={{ margin: "0 0 14px", fontSize: "clamp(24px,3vw,40px)", fontWeight: 800, color: "var(--ink-95)", letterSpacing: "-1.5px", lineHeight: 1.1, fontFamily: "var(--font-sans)" }}>
            One Platform. Every Global Mathematics Curriculum.
          </h2>
          <p style={{ margin: "0 auto", fontSize: 16, color: "var(--ink-muted)", maxWidth: 580, lineHeight: 1.65 }}>
            Personalized mathematics tutoring aligned with your child's curriculum — stronger concepts, better grades, and greater confidence.
          </p>
        </div>

        {/* Cards grid */}
        <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {curricula.map(c => (
            <div key={c.title}
              style={{ background: "#fff", borderRadius: 20, border: "1px solid #efefef", boxShadow: "0 2px 16px rgba(0,0,0,0.05)", overflow: "hidden", transition: "transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease", cursor: "default" }}
              onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-6px)"; e.currentTarget.style.boxShadow = `0 20px 48px rgba(0,0,0,0.10)`; e.currentTarget.style.borderColor = c.accent + "40"; }}
              onMouseLeave={e => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "0 2px 16px rgba(0,0,0,0.05)"; e.currentTarget.style.borderColor = "#efefef"; }}
            >
              {/* Accent top line */}
              <div style={{ height: 4, background: `linear-gradient(90deg, ${c.accent} 0%, ${c.accent}88 100%)` }} />

              <div style={{ padding: "20px 22px 24px" }}>
                {/* Header row */}
                <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 14 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    {/* Flag / globe */}
                    <div style={{ width: 38, height: 38, borderRadius: 10, background: c.accent + "12", border: `1px solid ${c.accent}22`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                      {c.globe
                        ? <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c.accent} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
                        : <img loading="lazy" decoding="async" src={`https://flagcdn.com/w40/${c.flag}.png`} alt={c.country} style={{ width: 24, borderRadius: 3 }} />
                      }
                    </div>
                    <div>
                      <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: "var(--ink-95)", letterSpacing: "-0.3px", lineHeight: 1.2 }}>{c.title}</h3>
                      <p style={{ margin: 0, fontSize: 11, color: "var(--ink-faint)", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.4px", marginTop: 2 }}>{c.country}</p>
                    </div>
                  </div>
                  {/* Trust badge */}
                  <span style={{ fontSize: 10, fontWeight: 700, color: c.accent, background: c.accent + "12", border: `1px solid ${c.accent}28`, borderRadius: "var(--rounded-full)", padding: "3px 9px", whiteSpace: "nowrap", flexShrink: 0 }}>
                    ✓ {c.trust}
                  </span>
                </div>

                {/* Description */}
                <p style={{ margin: "0 0 14px", fontSize: 13, color: "var(--ink-muted)", lineHeight: 1.6 }}>{c.desc}</p>

                {/* Features */}
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 7 }}>
                  {c.features.map(f => (
                    <li key={f} style={{ display: "flex", gap: 8, fontSize: 13, color: "var(--ink-secondary)", alignItems: "flex-start" }}>
                      <span style={{ color: c.accent, fontWeight: 700, lineHeight: 1.45, flexShrink: 0, fontSize: 12 }}>✓</span>{f}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ExamsSection() {
  const trustBadges = [
    { icon: "🎓", text: "14+ Years Teaching Experience" },
    { icon: "🌍", text: "Global Curriculum Expertise" },
    { icon: "👨‍🎓", text: "5,000+ Students Mentored" },
    { icon: "🏆", text: "Proven Exam Results" },
  ];

  const exams = [
    {
      icon: "🎓", badge: "University Admissions", badgeColor: "#3b82f6",
      title: "SAT Mathematics",
      subtitle: "Digital SAT Prep",
      desc: "Personalized preparation focused on improving scores and building the confidence to succeed in US university admissions.",
      features: ["Digital SAT Preparation", "Score Improvement Strategy", "Timed Practice Tests", "Strategy & Concept Sessions"],
      glow: "rgba(59,130,246,0.15)",
    },
    {
      icon: "🌍", badge: "International", badgeColor: "#a855f7",
      title: "Global Entrance Exams",
      subtitle: "ACT · Olympiad · University",
      desc: "Comprehensive preparation for ACT, Math Olympiads, scholarship examinations, and university-level mathematics worldwide.",
      features: ["ACT Mathematics Prep", "Math Olympiad Training", "University Level Math", "Scholarship Examinations"],
      glow: "rgba(168,85,247,0.15)",
    },
    {
      icon: "🎯", badge: "Most Popular", badgeColor: "#f59e0b",
      title: "IIT JEE Mathematics",
      subtitle: "JEE Main & Advanced",
      desc: "For students preparing for India's most competitive engineering entrance examination — from concept mastery to advanced problem solving.",
      features: ["Concept Mastery & Foundation", "Advanced Problem Solving", "Calculus & Coordinate Geometry", "Mock Tests & Doubt Sessions"],
      glow: "rgba(245,158,11,0.15)",
    },
    {
      icon: "⚙️", badge: "Graduate Level", badgeColor: "#14b8a6",
      title: "GATE Mathematics",
      subtitle: "Engineering Mathematics",
      desc: "Advanced mathematics preparation for engineering graduates aiming for top postgraduate programs and PSU opportunities.",
      features: ["Linear Algebra & Calculus", "Probability & Statistics", "Differential Equations", "PYQs & Full Mock Tests"],
      glow: "rgba(20,184,166,0.15)",
    },
  ];

  return (
    <section id="exams" style={{ background: "linear-gradient(135deg, #f5f3ff 0%, #ede9fe 35%, #e0e7ff 70%, #f0f4ff 100%)", padding: "88px 48px", position: "relative", overflow: "hidden" }}>
      {/* Background blobs */}
      <div aria-hidden="true" style={{ position:"absolute", top:-120, left:-80, width:500, height:500, borderRadius:"50%", background:"radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 68%)", pointerEvents:"none" }} />
      <div aria-hidden="true" style={{ position:"absolute", bottom:-80, right:-80, width:400, height:400, borderRadius:"50%", background:"radial-gradient(circle, rgba(99,102,241,0.10) 0%, transparent 68%)", pointerEvents:"none" }} />

      {/* Subtle math SVG pattern */}
      <svg role="presentation" aria-hidden="true" focusable="false" style={{ position:"absolute", inset:0, width:"100%", height:"100%", opacity:0.06, pointerEvents:"none" }} viewBox="0 0 1300 600" preserveAspectRatio="xMidYMid slice">
        {[0,130,260,390,520,650,780,910,1040,1170].map(x => <line key={x} x1={x} y1="0" x2={x} y2="600" stroke="#6d28d9" strokeWidth="0.5"/>)}
        {[0,100,200,300,400,500,600].map(y => <line key={y} x1="0" y1={y} x2="1300" y2={y} stroke="#6d28d9" strokeWidth="0.5"/>)}
        <path d="M 50 500 Q 250 100 500 400" stroke="#6d28d9" strokeWidth="1.2" fill="none"/>
        <path d="M 800 550 Q 1000 150 1250 450" stroke="#6d28d9" strokeWidth="1" fill="none"/>
        <text x="600" y="120" fill="#6d28d9" fontSize="18" fontFamily="Georgia,serif">∫f(x)dx</text>
        <text x="100" y="200" fill="#6d28d9" fontSize="14" fontFamily="Georgia,serif">∑(1/n²) = π²/6</text>
        <text x="950" y="300" fill="#6d28d9" fontSize="16" fontFamily="Georgia,serif">lim f(x)</text>
        <circle cx="650" cy="80" r="45" stroke="#6d28d9" strokeWidth="0.7" fill="none"/>
      </svg>

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

        {/* Header */}
        <div style={{ textAlign: "center", marginBottom: 52 }}>
          <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: 18, fontSize: 13, fontWeight: 600, color: "#7c3aed" }}>
            🏆 Competitive Exam Preparation
          </div>
          <h2 style={{ margin: "0 0 16px", fontSize: "clamp(26px,3.5vw,46px)", fontWeight: 800, color: "var(--ink-95)", letterSpacing: "-1.5px", lineHeight: 1.08, fontFamily: "var(--font-sans)" }}>
            Beyond the Classroom.<br />
            <span style={{ background: "linear-gradient(90deg, #7c3aed 0%, #4f46e5 60%, #2563eb 100%)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text", MozBackgroundClip: "text" }}>
              Master Mathematics for Competitive Success.
            </span>
          </h2>
          <p style={{ margin: "0 auto", fontSize: 17, color: "var(--ink-muted)", maxWidth: 560, lineHeight: 1.65 }}>
            Personalized one-to-one coaching for competitive examinations, university admissions, and advanced mathematics—designed to help students achieve their highest potential.
          </p>
        </div>

        {/* Exam cards */}
        <div className="grid-4-exams" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
          {exams.map(e => (
            <div key={e.title}
              style={{ background: "#fff", border: "1px solid rgba(109,40,217,0.10)", borderRadius: 22, padding: "24px 22px 28px", boxShadow: "0 4px 20px rgba(109,40,217,0.07)", transition: "transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease", cursor: "default" }}
              onMouseEnter={e2 => { e2.currentTarget.style.transform = "translateY(-8px)"; e2.currentTarget.style.boxShadow = `0 20px 48px rgba(109,40,217,0.14), 0 0 30px ${e.glow}`; e2.currentTarget.style.borderColor = e.badgeColor + "44"; }}
              onMouseLeave={e2 => { e2.currentTarget.style.transform = "none"; e2.currentTarget.style.boxShadow = "0 4px 20px rgba(109,40,217,0.07)"; e2.currentTarget.style.borderColor = "rgba(109,40,217,0.10)"; }}
            >
              {/* Icon + badge */}
              <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 16 }}>
                <span style={{ fontSize: 32, lineHeight: 1 }}>{e.icon}</span>
                <span style={{ fontSize: 10, fontWeight: 700, color: e.badgeColor, background: e.badgeColor + "18", border: `1px solid ${e.badgeColor}35`, borderRadius: "var(--rounded-full)", padding: "3px 10px", whiteSpace: "nowrap" }}>{e.badge}</span>
              </div>

              {/* Title */}
              <h3 style={{ margin: "0 0 3px", fontSize: 17, fontWeight: 700, color: "var(--ink-95)", letterSpacing: "-0.3px", lineHeight: 1.2 }}>{e.title}</h3>
              <p style={{ margin: "0 0 12px", fontSize: 12, color: "var(--ink-faint)", fontWeight: 600 }}>{e.subtitle}</p>

              {/* Desc */}
              <p style={{ margin: "0 0 16px", fontSize: 13, color: "var(--ink-muted)", lineHeight: 1.6 }}>{e.desc}</p>

              {/* Features */}
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                {e.features.map(f => (
                  <li key={f} style={{ display: "flex", gap: 8, fontSize: 13, color: "var(--ink-secondary)", alignItems: "flex-start" }}>
                    <span style={{ color: "#7c3aed", fontWeight: 700, lineHeight: 1.4, flexShrink: 0 }}>✓</span>{f}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Bottom CTA */}
        <div style={{ textAlign: "center", marginTop: 48 }}>
          <Button variant="primary" size="lg" onClick={() => window.__mmBook?.()}>Book a Free Assessment →</Button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CustomNav, HeroSection, TrustedSection, ServicesSection, CurriculumSection, ExamsSection });