// Mobile screens — single-column phone layout

// =============== Mobile Bottom Nav ===============
const MobileNav = ({ tab, setTab }) => {
  const items = [
    { id: "home", icon: "home", label: "หน้าหลัก" },
    { id: "tutors", icon: "search", label: "ค้นหา" },
    { id: "schedule", icon: "calendar", label: "ตาราง" },
    { id: "chat", icon: "chat", label: "แชท", badge: 3 },
    { id: "me", icon: "user", label: "ฉัน" }
  ];
  return (
    <nav className="m-bottom-nav">
      {items.map(i => (
        <button
          key={i.id}
          onClick={() => setTab(i.id)}
          className={`m-nav-btn ${tab === i.id ? "active" : ""}`}
        >
          <div className="m-nav-ico">
            <Icon name={i.icon} size={20} color={tab === i.id ? "#F26666" : "#8b87a8"} />
            {i.badge && <span className="m-nav-badge">{i.badge}</span>}
          </div>
          <span className="m-nav-label">{i.label}</span>
        </button>
      ))}
    </nav>
  );
};

// =============== Mobile Top Header ===============
const MobileHeader = ({ title, back, action, sub }) => (
  <header className="m-header">
    {back ? (
      <button onClick={back} className="m-back-btn">←</button>
    ) : (
      <div className="m-logo-mark">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="white">
          <path d="m12 2 2.9 6.6 7.1.7-5.4 4.9 1.6 7L12 17.8 5.8 21.2l1.6-7L2 9.3l7.1-.7Z" />
        </svg>
      </div>
    )}
    <div style={{ flex: 1, minWidth: 0 }}>
      <h2 style={{ fontSize: 20, lineHeight: 1.1 }}>{title}</h2>
      {sub && <div style={{ fontSize: 11, color: "var(--muted)", fontWeight: 700 }}>{sub}</div>}
    </div>
    {action || (
      <button className="icon-btn" style={{ width: 38, height: 38 }}>
        <Icon name="bell" size={16} />
        <span className="dot" style={{ top: 4, right: 6 }}></span>
      </button>
    )}
  </header>
);

// =============== Mobile Home ===============
const MobileHome = ({ go }) => (
  <div className="m-screen">
    <MobileHeader
      title={`สวัสดี ${ME.name}!`}
      sub={`🔥 ${ME.streak}d · ⚡ ${ME.xp} XP · 🪙 ${ME.coins}`}
    />
    <div style={{ padding: "0 16px 100px" }}>
      {/* Greet card */}
      <div className="card tint-purple" style={{ padding: 18, marginBottom: 14, position: "relative", overflow: "hidden" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{ flex: 1 }}>
            <span className="pill" style={{ background: "white", fontSize: 11 }}>
              <Icon name="fire" size={12} color="#F26666" /> สวัสดีตอนบ่าย
            </span>
            <h1 style={{ fontSize: 22, marginTop: 8, lineHeight: 1.1 }}>
              ไปเรียนกันต่อ <br/>
              <span style={{ color: "var(--coral-deep)" }}>{ME.name}</span>!
            </h1>
            <div style={{ fontSize: 12, color: "var(--ink-soft)", fontWeight: 600, marginTop: 6 }}>
              วันนี้มีคลาสกับ <b>ครูพีช</b> 16:00 น.
            </div>
          </div>
          <Stella size={84} hat />
        </div>
      </div>

      {/* Stats compact */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, marginBottom: 14 }}>
        {[
          { icon: "🔥", v: ME.streak, l: "วัน", c: "coral" },
          { icon: "⚡", v: `${(ME.xp/1000).toFixed(1)}k`, l: "XP", c: "yellow" },
          { icon: "🪙", v: ME.coins, l: "เหรียญ", c: "mint" },
          { icon: "📚", v: ME.hoursTotal, l: "ชม.", c: "purple" }
        ].map((s, i) => (
          <div key={i} style={{
            background: `var(--${s.c})`,
            border: "2px solid var(--ink)",
            borderRadius: 14, padding: "10px 6px",
            boxShadow: "0 2px 0 var(--ink)", textAlign: "center"
          }}>
            <div style={{ fontSize: 18 }}>{s.icon}</div>
            <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 16, lineHeight: 1 }}>{s.v}</div>
            <div style={{ fontSize: 9, fontWeight: 700, color: "var(--ink-soft)" }}>{s.l}</div>
          </div>
        ))}
      </div>

      {/* Live class card */}
      <div className="card tint-dark" style={{ padding: 16, marginBottom: 14, position: "relative" }}>
        <span style={{
          position: "absolute", top: -8, right: 14,
          background: "var(--coral)", color: "white",
          padding: "3px 10px", borderRadius: 999,
          fontSize: 10, fontWeight: 800, border: "2px solid white"
        }}>🔴 อีก 1:24 ชม.</span>
        <div style={{ fontSize: 11, color: "rgba(255,255,255,0.7)", fontWeight: 700 }}>คลาสถัดไป</div>
        <h3 style={{ color: "white", fontSize: 18, marginTop: 4 }}>คณิต — ตรีโกณ</h3>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 8, color: "white", fontSize: 12 }}>
          <span style={{ width: 28, height: 28, borderRadius: 8, background: "var(--yellow)", display: "grid", placeItems: "center", fontSize: 16 }}>👩‍🏫</span>
          <span style={{ fontWeight: 700 }}>ครูพีช · 16:00</span>
        </div>
        <button className="btn primary sm" style={{ width: "100%", marginTop: 12 }} onClick={() => go("classroom")}>
          <Icon name="play" size={12} color="white" /> เข้าห้องเรียน
        </button>
      </div>

      {/* Subjects */}
      <div className="m-section-title">วิชา</div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, marginBottom: 18 }}>
        {SUBJECTS.slice(0, 8).map(s => (
          <button key={s.id} onClick={() => go("tutors")} style={{
            background: `var(--${s.color})`,
            border: "2px solid var(--ink)",
            borderRadius: 14, padding: "10px 4px",
            cursor: "pointer", boxShadow: "0 2px 0 var(--ink)",
            display: "flex", flexDirection: "column", alignItems: "center", gap: 2,
            fontFamily: "Baloo 2", fontWeight: 700
          }}>
            <span style={{ fontSize: 22 }}>{s.icon}</span>
            <span style={{ fontSize: 10 }}>{s.name}</span>
          </button>
        ))}
      </div>

      {/* Featured tutors */}
      <div className="m-section-row">
        <div className="m-section-title">ครูแนะนำ ⭐</div>
        <button onClick={() => go("tutors")} className="m-link-btn">ดูทั้งหมด →</button>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 18 }}>
        {TUTORS.slice(0, 3).map(t => (
          <div key={t.id} onClick={() => go("tutor", { tutorId: t.id })} className="card flat" style={{ padding: 12, display: "flex", gap: 10, alignItems: "center", cursor: "pointer" }}>
            <div style={{ width: 56, height: 56, borderRadius: 16, background: t.avatarBg, border: "2px solid var(--ink)", display: "grid", placeItems: "center", fontSize: 28, flexShrink: 0 }}>{t.emoji}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 15 }}>{t.name}</div>
              <div style={{ fontSize: 11, color: "var(--muted)", fontWeight: 700 }}>{t.subjectIcon} {t.subject}</div>
              <div style={{ marginTop: 4 }}><Stars value={t.rating} size={10} /></div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 16, color: "var(--coral-deep)" }}>฿{t.rate}</div>
              <div style={{ fontSize: 10, color: "var(--muted)", fontWeight: 700 }}>/ชม.</div>
            </div>
          </div>
        ))}
      </div>

      {/* Homework strip */}
      <div className="m-section-row">
        <div className="m-section-title">การบ้าน</div>
        <button onClick={() => go("homework")} className="m-link-btn">จัดการ →</button>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {HOMEWORK.slice(0, 2).map(h => (
          <div key={h.id} className="card flat" style={{ padding: 12, display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{
              width: 42, height: 42, borderRadius: 12,
              background: `var(--${h.color})`,
              border: "2px solid var(--ink)",
              display: "grid", placeItems: "center", fontSize: 20, flexShrink: 0
            }}>{h.icon}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 700, fontSize: 13, marginBottom: 2 }}>{h.title}</div>
              <div style={{ fontSize: 10, color: "var(--muted)", fontWeight: 600 }}>ส่ง {h.due}</div>
              <div style={{ marginTop: 4 }}>
                <ProgressBar value={h.progress} max={100} color={h.color === "mint" ? "mint" : h.color === "sky" ? "sky" : "coral"} />
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// =============== Mobile Tutors ===============
const MobileTutors = ({ go }) => {
  const [filter, setFilter] = React.useState("all");
  const filtered = filter === "all" ? TUTORS : TUTORS.filter(t => t.subjectEn.toLowerCase().includes(filter));
  return (
    <div className="m-screen">
      <MobileHeader title="ตลาดติวเตอร์" sub={`${filtered.length} ครู ผ่านการตรวจสอบแล้ว`} />
      <div style={{ padding: "0 16px 100px" }}>
        <div style={{
          display: "flex", gap: 8, alignItems: "center",
          background: "white", border: "2px solid var(--ink)",
          borderRadius: 999, padding: "10px 14px",
          boxShadow: "0 2px 0 var(--ink)", marginBottom: 12
        }}>
          <Icon name="search" size={16} color="#8b87a8" />
          <input style={{ flex: 1, border: 0, outline: 0, fontFamily: "inherit", background: "transparent", fontSize: 14 }} placeholder="ค้นหาครู, วิชา..." />
          <Icon name="filter" size={16} />
        </div>

        {/* Subject filter pills — horizontal scroll */}
        <div className="m-pill-scroll">
          <button
            className={`pill ${filter === "all" ? "coral" : "ghost"}`}
            style={{ fontSize: 11, padding: "6px 12px", flexShrink: 0, cursor: "pointer" }}
            onClick={() => setFilter("all")}
          >ทั้งหมด</button>
          {SUBJECTS.slice(0, 7).map(s => (
            <button
              key={s.id}
              className={`pill ${filter === s.id ? s.color : "ghost"}`}
              style={{ fontSize: 11, padding: "6px 12px", flexShrink: 0, cursor: "pointer" }}
              onClick={() => setFilter(s.id)}
            >{s.icon} {s.name}</button>
          ))}
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {filtered.map(t => (
            <div key={t.id} onClick={() => go("tutor", { tutorId: t.id })} className="tutor-card" style={{ padding: 14 }}>
              <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                <div style={{ width: 60, height: 60, borderRadius: 16, background: t.avatarBg, border: "2px solid var(--ink)", display: "grid", placeItems: "center", fontSize: 30, flexShrink: 0 }}>{t.emoji}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }}>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 16 }}>{t.name}</div>
                      <div style={{ fontSize: 11, color: "var(--muted)", fontWeight: 700 }}>{t.subjectIcon} {t.subject}</div>
                    </div>
                    <div style={{ textAlign: "right", flexShrink: 0 }}>
                      <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 16, color: "var(--coral-deep)" }}>฿{t.rate}</div>
                      <div style={{ fontSize: 10, color: "var(--muted)", fontWeight: 700 }}>/ชม.</div>
                    </div>
                  </div>
                  <div style={{ marginTop: 6 }}><Stars value={t.rating} size={10} /><span style={{ fontSize: 10, color: "var(--muted)", marginLeft: 4 }}>({t.reviews})</span></div>
                  <div style={{ display: "flex", gap: 4, marginTop: 6, flexWrap: "wrap" }}>
                    {t.badges.slice(0, 2).map((b, i) => (
                      <span key={i} className="pill ghost" style={{ fontSize: 9, padding: "2px 6px" }}>{b}</span>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// =============== Mobile Tutor Profile + Booking ===============
const MobileTutorBooking = ({ tutorId, go, onBook }) => {
  const tutor = TUTORS.find(t => t.id === tutorId) || TUTORS[0];
  const [dayIdx, setDayIdx] = React.useState(2);
  const [slot, setSlot] = React.useState(null);
  const [dur, setDur] = React.useState(1);
  const days = ["จ.","อ.","พ.","พฤ.","ศ.","ส.","อา."];
  const dates = [14, 15, 16, 17, 18, 19, 20];

  return (
    <div className="m-screen" style={{ paddingBottom: 100 }}>
      <div style={{ padding: "8px 16px" }}>
        <button onClick={() => go("tutors")} className="m-back-btn" style={{ marginBottom: 10 }}>←</button>
      </div>

      {/* Hero */}
      <div style={{
        background: `linear-gradient(160deg, ${tutor.avatarBg} 0%, #FFD668 100%)`,
        padding: "8px 16px 24px",
        margin: "0 16px 14px",
        borderRadius: 22,
        border: "2px solid var(--ink)",
        boxShadow: "0 4px 0 var(--ink)"
      }}>
        <div style={{ textAlign: "center" }}>
          <div style={{
            width: 88, height: 88, borderRadius: 28,
            background: "white", border: "2px solid var(--ink)",
            display: "inline-grid", placeItems: "center",
            fontSize: 50, boxShadow: "0 4px 0 var(--ink)"
          }}>{tutor.emoji}</div>
          <h1 style={{ fontSize: 24, marginTop: 10 }}>{tutor.name}</h1>
          <div style={{ fontSize: 13, fontWeight: 700, color: "var(--ink-soft)" }}>
            {tutor.subjectIcon} {tutor.subject} · {tutor.grades}
          </div>
          <div style={{ display: "inline-flex", marginTop: 6 }}><Stars value={tutor.rating} size={12} /></div>
        </div>
        <div style={{ display: "flex", gap: 6, marginTop: 12, justifyContent: "center", flexWrap: "wrap" }}>
          {tutor.badges.map((b, i) => (
            <span key={i} className="sticker" style={{ background: "white", fontSize: 10, transform: `rotate(${i % 2 ? 2 : -2}deg)` }}>{b}</span>
          ))}
        </div>
      </div>

      <div style={{ padding: "0 16px" }}>
        <p style={{ fontSize: 13, lineHeight: 1.6, color: "var(--ink-soft)", margin: "0 0 14px", fontWeight: 600 }}>
          {tutor.bio}
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginBottom: 18 }}>
          {[
            { v: tutor.students, l: "นักเรียน", c: "yellow" },
            { v: `${tutor.hours}`, l: "ชั่วโมง", c: "sky" },
            { v: tutor.reviews, l: "รีวิว", c: "mint" }
          ].map((s, i) => (
            <div key={i} style={{
              background: `var(--${s.c})`, border: "2px solid var(--ink)",
              borderRadius: 14, padding: 10, textAlign: "center",
              boxShadow: "0 2px 0 var(--ink)"
            }}>
              <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 18 }}>{s.v}</div>
              <div style={{ fontSize: 10, fontWeight: 700 }}>{s.l}</div>
            </div>
          ))}
        </div>

        {/* Booking */}
        <div className="card tint-yellow" style={{ padding: 16, marginBottom: 14 }}>
          <h3 style={{ fontSize: 18, marginBottom: 10 }}>📅 จองคลาส</h3>

          <div className="m-form-label">วัน</div>
          <div style={{ display: "flex", gap: 4, marginBottom: 14, overflowX: "auto", paddingBottom: 2 }}>
            {days.map((d, i) => (
              <button
                key={i}
                onClick={() => { setDayIdx(i); setSlot(null); }}
                style={{
                  flex: "0 0 46px",
                  padding: "8px 4px",
                  borderRadius: 12,
                  background: dayIdx === i ? "var(--ink)" : "white",
                  color: dayIdx === i ? "white" : "var(--ink)",
                  border: "2px solid var(--ink)",
                  cursor: "pointer",
                  boxShadow: "0 2px 0 var(--ink)",
                  textAlign: "center"
                }}
              >
                <div style={{ fontSize: 9, fontWeight: 700 }}>{d}</div>
                <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 18 }}>{dates[i]}</div>
              </button>
            ))}
          </div>

          <div className="m-form-label">เวลา</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6, marginBottom: 14 }}>
            {[9,10,11,13,14,15,17,18,19,20].map(h => {
              const ok = tutor.available.includes(h);
              const sel = slot === h;
              return (
                <button
                  key={h}
                  disabled={!ok}
                  onClick={() => setSlot(h)}
                  style={{
                    padding: 10, borderRadius: 12,
                    background: sel ? "var(--coral)" : ok ? "white" : "var(--paper-2)",
                    color: sel ? "white" : ok ? "var(--ink)" : "var(--muted)",
                    border: "2px solid var(--ink)",
                    cursor: ok ? "pointer" : "not-allowed",
                    fontFamily: "Baloo 2", fontWeight: 700, fontSize: 13,
                    boxShadow: ok ? "0 2px 0 var(--ink)" : "none",
                    textDecoration: ok ? "none" : "line-through",
                    opacity: ok ? 1 : 0.5
                  }}
                >{String(h).padStart(2,"0")}:00</button>
              );
            })}
          </div>

          <div className="m-form-label">ชั่วโมง</div>
          <div style={{ display: "flex", gap: 6, marginBottom: 14 }}>
            {[1, 1.5, 2, 3].map(d => (
              <button key={d} onClick={() => setDur(d)} style={{
                flex: 1, padding: 10, borderRadius: 12,
                background: dur === d ? "var(--ink)" : "white",
                color: dur === d ? "white" : "var(--ink)",
                border: "2px solid var(--ink)",
                cursor: "pointer", fontFamily: "Baloo 2", fontWeight: 700, fontSize: 13,
                boxShadow: "0 2px 0 var(--ink)"
              }}>{d} ชม.</button>
            ))}
          </div>

          <div style={{ padding: 12, borderRadius: 12, background: "white", border: "2px solid var(--ink)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <span style={{ fontSize: 12, fontWeight: 700, color: "var(--ink-soft)" }}>รวม</span>
            <span style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 20, color: "var(--coral-deep)" }}>
              ฿{(tutor.rate * dur).toLocaleString()}
            </span>
          </div>
        </div>

        <div className="line-strip" style={{ justifyContent: "center", marginBottom: 14, fontSize: 12 }}>
          <Icon name="line" size={14} color="white" />
          แจ้งเตือนผ่าน LINE อัตโนมัติ
        </div>
      </div>

      {/* Sticky CTA */}
      <div className="m-sticky-cta">
        <button
          className="btn primary lg"
          style={{ width: "100%" }}
          disabled={!slot}
          onClick={() => slot && onBook({ tutor, slot, duration: dur, date: dates[dayIdx], day: days[dayIdx], dayIdx })}
        >
          {slot ? `จอง ${String(slot).padStart(2,"0")}:00 · ฿${(tutor.rate * dur).toLocaleString()}` : "เลือกเวลา"} →
        </button>
      </div>
    </div>
  );
};

// =============== Mobile Schedule ===============
const MobileSchedule = ({ go }) => {
  const weekDays = ["จ.","อ.","พ.","พฤ.","ศ.","ส.","อา."];
  const weekDates = [14, 15, 16, 17, 18, 19, 20];
  const [day, setDay] = React.useState(3);
  const events = [
    { day: 3, time: "16:00", subject: "Math", tutor: "ครูพีช", color: "yellow", emoji: "🧮", dur: "1 ชม." },
    { day: 4, time: "14:00", subject: "English", tutor: "ครูแบงค์", color: "sky", emoji: "🔤", dur: "1.5 ชม." },
    { day: 5, time: "10:00", subject: "Science", tutor: "ครูโดนัท", color: "mint", emoji: "🔬", dur: "2 ชม." },
    { day: 6, time: "17:00", subject: "Coding", tutor: "ครูปอย", color: "purple", emoji: "💻", dur: "1 ชม." }
  ];
  const todays = events.filter(e => e.day === day);
  return (
    <div className="m-screen">
      <MobileHeader title="📅 ตารางเรียน" sub="14-20 พ.ค. 2026" />
      <div style={{ padding: "0 16px 100px" }}>
        <div style={{ display: "flex", gap: 6, marginBottom: 18 }}>
          {weekDays.map((d, i) => (
            <button key={i} onClick={() => setDay(i)} style={{
              flex: 1, padding: "10px 4px",
              borderRadius: 14,
              background: day === i ? "var(--ink)" : events.some(e => e.day === i) ? "var(--yellow)" : "white",
              color: day === i ? "white" : "var(--ink)",
              border: "2px solid var(--ink)",
              cursor: "pointer", boxShadow: "0 2px 0 var(--ink)",
              textAlign: "center"
            }}>
              <div style={{ fontSize: 9, fontWeight: 700 }}>{d}</div>
              <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 16 }}>{weekDates[i]}</div>
              {events.some(e => e.day === i) && <div style={{ width: 4, height: 4, borderRadius: 2, background: day === i ? "white" : "var(--coral-deep)", margin: "2px auto 0" }} />}
            </button>
          ))}
        </div>

        <div className="m-section-title">
          {todays.length > 0 ? `${todays.length} คลาส วันที่ ${weekDates[day]} พ.ค.` : "วันว่าง 🎉"}
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 10 }}>
          {todays.map((e, i) => (
            <div key={i} onClick={() => go("classroom")} className="card flat" style={{ padding: 14, display: "flex", gap: 12, alignItems: "center", cursor: "pointer" }}>
              <div style={{ width: 50, height: 50, borderRadius: 14, background: `var(--${e.color})`, border: "2px solid var(--ink)", display: "grid", placeItems: "center", fontSize: 26 }}>{e.emoji}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 15 }}>{e.subject}</div>
                <div style={{ fontSize: 11, color: "var(--muted)", fontWeight: 700 }}>{e.tutor} · {e.dur}</div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 14 }}>{e.time}</div>
                <div style={{ fontSize: 9, color: "var(--coral-deep)", fontWeight: 800 }}>เข้าห้อง →</div>
              </div>
            </div>
          ))}
          {todays.length === 0 && (
            <div style={{ textAlign: "center", padding: 40, color: "var(--muted)" }}>
              <Stella size={100} mood="sleep" />
              <div style={{ marginTop: 10, fontWeight: 700, fontSize: 14 }}>ไม่มีคลาสวันนี้ พักได้ ☕</div>
              <button className="btn sm primary" style={{ marginTop: 12 }} onClick={() => go("tutors")}>จองคลาสใหม่</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// =============== Mobile Chat ===============
const MobileChat = ({ go }) => {
  const [activeId, setActiveId] = React.useState(null);
  const active = activeId ? CHATS.find(c => c.id === activeId) : null;
  if (!active) {
    return (
      <div className="m-screen">
        <MobileHeader title="💬 แชท" sub="เชื่อมต่อ LINE แล้ว" />
        <div style={{ padding: "0 16px 100px" }}>
          <div className="line-strip" style={{ marginBottom: 14, fontSize: 12 }}>
            <Icon name="line" size={14} color="white" />
            ทุกข้อความซิงค์ผ่าน LINE อัตโนมัติ
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {CHATS.map(c => (
              <div
                key={c.id}
                onClick={() => setActiveId(c.id)}
                style={{
                  padding: 12,
                  display: "flex", gap: 12, alignItems: "center",
                  cursor: "pointer", borderRadius: 16,
                  background: "white", border: "2px solid var(--ink)",
                  boxShadow: "0 2px 0 var(--ink)"
                }}
              >
                <div style={{ position: "relative", flexShrink: 0 }}>
                  <div style={{
                    width: 48, height: 48, borderRadius: "50%",
                    background: c.color, border: "2px solid var(--ink)",
                    display: "grid", placeItems: "center", fontSize: 24
                  }}>{c.avatar}</div>
                  {c.online && (
                    <div style={{
                      position: "absolute", bottom: 0, right: 0,
                      width: 12, height: 12, borderRadius: "50%",
                      background: "var(--mint-deep)", border: "2px solid white"
                    }} />
                  )}
                  {c.via === "line" && (
                    <div style={{
                      position: "absolute", top: -2, right: -2,
                      width: 16, height: 16, borderRadius: "50%",
                      background: "#06C755", border: "2px solid white",
                      display: "grid", placeItems: "center", fontSize: 9, color: "white", fontWeight: 800
                    }}>L</div>
                  )}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <div style={{ fontWeight: 800, fontSize: 14 }}>{c.name}</div>
                    <div style={{ fontSize: 10, color: "var(--muted)", fontWeight: 600 }}>{c.time}</div>
                  </div>
                  <div style={{
                    fontSize: 12, color: c.unread ? "var(--ink)" : "var(--muted)",
                    fontWeight: c.unread ? 700 : 500,
                    overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"
                  }}>{c.last}</div>
                </div>
                {c.unread > 0 && (
                  <div style={{
                    minWidth: 22, height: 22, borderRadius: 11,
                    background: "var(--coral)", color: "white",
                    fontSize: 11, fontWeight: 800,
                    display: "grid", placeItems: "center", padding: "0 6px",
                    border: "1.5px solid var(--ink)"
                  }}>{c.unread}</div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
  return (
    <div className="m-screen" style={{ paddingBottom: 140 }}>
      <header className="m-header" style={{ borderBottom: "2px solid var(--border)" }}>
        <button onClick={() => setActiveId(null)} className="m-back-btn">←</button>
        <div style={{
          width: 38, height: 38, borderRadius: "50%",
          background: active.color, border: "2px solid var(--ink)",
          display: "grid", placeItems: "center", fontSize: 18
        }}>{active.avatar}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 15 }}>{active.name}</div>
            {active.via === "line" && (
              <span className="pill" style={{ background: "#06C755", color: "white", fontSize: 9, padding: "1px 6px" }}>LINE</span>
            )}
          </div>
          <div style={{ fontSize: 10, color: active.online ? "var(--mint-deep)" : "var(--muted)", fontWeight: 700 }}>
            {active.online ? "● ออนไลน์" : "ออฟไลน์"} · {active.subject}
          </div>
        </div>
        <button className="icon-btn" style={{ width: 36, height: 36 }}><Icon name="video" size={14} /></button>
      </header>
      <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 10, background: "linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%)", minHeight: "calc(100vh - 250px)" }}>
        <div style={{ textAlign: "center", fontSize: 10, color: "var(--muted)", fontWeight: 700, margin: "4px 0" }}>วันนี้</div>
        {(active.messages.length > 0 ? active.messages : [
          { from: "them", text: "สวัสดีค่ะ! มีอะไรให้ช่วยมั้ยคะ", time: "12:00", line: active.via === "line" }
        ]).map((m, i) => (
          <div key={i} style={{ display: "flex", flexDirection: "column", alignItems: m.from === "me" ? "flex-end" : "flex-start" }}>
            <div className={`bubble ${m.from} ${m.line ? "line" : ""}`} style={{ fontSize: 13, maxWidth: "82%" }}>{m.text}</div>
            <div style={{ fontSize: 9, color: "var(--muted)", fontWeight: 600, marginTop: 2, padding: "0 4px" }}>
              {m.line && "🟢 LINE · "}{m.time}
            </div>
          </div>
        ))}
      </div>
      <div className="m-chat-input">
        <button className="icon-btn" style={{ width: 38, height: 38, flexShrink: 0 }}>📎</button>
        <input style={{
          flex: 1, padding: "10px 14px", borderRadius: 999,
          border: "2px solid var(--ink)", fontFamily: "inherit",
          outline: "none", fontSize: 13
        }} placeholder="พิมพ์ข้อความ..." />
        <button className="btn primary sm" style={{ flexShrink: 0 }}>ส่ง</button>
      </div>
    </div>
  );
};

// =============== Mobile Classroom ===============
const MobileClassroom = ({ go }) => {
  const [muted, setMuted] = React.useState(false);
  const [cam, setCam] = React.useState(true);
  return (
    <div className="m-screen" style={{ background: "#1b1740", minHeight: "100vh", paddingBottom: 0 }}>
      <header style={{ padding: "12px 16px", display: "flex", alignItems: "center", gap: 10 }}>
        <button onClick={() => go("home")} className="m-back-btn" style={{ background: "rgba(255,255,255,0.1)", border: "2px solid rgba(255,255,255,0.2)", color: "white", boxShadow: "none" }}>←</button>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 16, color: "white" }}>คณิต — ตรีโกณ</div>
          <div style={{ fontSize: 10, color: "rgba(255,255,255,0.6)", fontWeight: 700 }}>ครูพีช · เหลือ 42 นาที</div>
        </div>
        <span className="pill coral" style={{ fontSize: 10, padding: "3px 8px" }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "white", animation: "shine 1.5s infinite", display: "inline-block" }}></span> LIVE
        </span>
      </header>

      {/* Main stage */}
      <div style={{ background: "white", margin: "0 12px", borderRadius: 16, overflow: "hidden", border: "2px solid rgba(255,255,255,0.2)" }}>
        <div style={{ aspectRatio: "16/10", background: "linear-gradient(135deg, #FFD668, #FF8A8A)", display: "grid", placeItems: "center", position: "relative" }}>
          <Stella size={140} hat />
          <div style={{ position: "absolute", bottom: 10, left: 10, background: "rgba(0,0,0,0.6)", color: "white", padding: "3px 8px", borderRadius: 999, fontSize: 10, fontWeight: 700 }}>
            👩‍🏫 ครูพีช
          </div>
        </div>
        {/* Self view */}
        <div style={{
          position: "absolute", top: 70, right: 20,
          width: 80, height: 100, borderRadius: 12,
          background: "var(--coral)", border: "2px solid white",
          display: "grid", placeItems: "center", fontSize: 40
        }}>🦊</div>
      </div>

      {/* Chat preview */}
      <div style={{ margin: "12px", padding: 12, background: "rgba(255,255,255,0.05)", borderRadius: 14, border: "1px solid rgba(255,255,255,0.1)" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 12 }}>
          <div style={{ alignSelf: "flex-start", padding: "6px 12px", borderRadius: 14, background: "white", maxWidth: "70%" }}>ลองตอบดูสิ b=4, c=5 แล้ว a = ?</div>
          <div style={{ alignSelf: "flex-end", padding: "6px 12px", borderRadius: 14, background: "var(--coral)", color: "white", maxWidth: "70%" }}>a = 3 ครับ! ✨</div>
          <div style={{ alignSelf: "flex-start", padding: "6px 12px", borderRadius: 14, background: "var(--mint)", maxWidth: "70%" }}>เก่งมาก! 🎉 +20 XP</div>
        </div>
      </div>

      {/* Controls */}
      <div style={{
        position: "fixed", bottom: 0, left: 0, right: 0,
        padding: "20px 16px 36px",
        background: "rgba(0,0,0,0.5)", backdropFilter: "blur(20px)",
        display: "flex", gap: 10, justifyContent: "center"
      }}>
        <button onClick={() => setMuted(m => !m)} className="icon-btn" style={{ background: muted ? "var(--coral)" : "white", width: 52, height: 52 }}>{muted ? "🔇" : "🎤"}</button>
        <button onClick={() => setCam(c => !c)} className="icon-btn" style={{ background: !cam ? "var(--coral)" : "white", width: 52, height: 52 }}>{cam ? "📹" : "🚫"}</button>
        <button className="icon-btn" style={{ width: 52, height: 52 }}>✋</button>
        <button className="icon-btn" style={{ width: 52, height: 52 }}>💬</button>
        <button onClick={() => go("home")} className="icon-btn" style={{ background: "var(--coral)", width: 52, height: 52 }}>
          <Icon name="close" size={20} color="white" />
        </button>
      </div>
    </div>
  );
};

// =============== Mobile Homework ===============
const MobileHomework = ({ go }) => {
  const [tab, setTab] = React.useState("all");
  const filtered = HOMEWORK.filter(h => tab === "all" ? true : h.status === tab);
  const stats = {
    todo: HOMEWORK.filter(h => h.status === "todo").length,
    doing: HOMEWORK.filter(h => h.status === "doing").length,
    done: HOMEWORK.filter(h => h.status === "done").length
  };
  return (
    <div className="m-screen">
      <MobileHeader title="📝 การบ้าน" sub="ส่งให้ตรงเวลา รับ XP + Coins!" />
      <div style={{ padding: "0 16px 100px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginBottom: 14 }}>
          {[
            { v: stats.todo, l: "รออยู่", c: "yellow", e: "📋" },
            { v: stats.doing, l: "กำลังทำ", c: "coral", e: "⚡" },
            { v: stats.done, l: "เสร็จแล้ว", c: "mint", e: "✅" }
          ].map((s, i) => (
            <div key={i} className={`card tint-${s.c}`} style={{ padding: 12, textAlign: "center" }}>
              <div style={{ fontSize: 20 }}>{s.e}</div>
              <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 28, lineHeight: 1 }}>{s.v}</div>
              <div style={{ fontSize: 11, fontWeight: 700, color: "var(--ink-soft)" }}>{s.l}</div>
            </div>
          ))}
        </div>

        <div style={{
          padding: 16, borderRadius: 16,
          border: "3px dashed var(--border-strong)",
          background: "white", textAlign: "center", marginBottom: 14
        }}>
          <div style={{ fontSize: 32, marginBottom: 4 }}>📂</div>
          <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 13, marginBottom: 8 }}>อัปโหลดการบ้าน</div>
          <button className="btn sm primary">
            <Icon name="upload" size={12} color="white" /> เลือกไฟล์
          </button>
        </div>

        <div className="m-pill-scroll" style={{ marginBottom: 14 }}>
          {[
            { id: "all", label: "ทั้งหมด" },
            { id: "todo", label: `📋 ต้องทำ` },
            { id: "doing", label: `⚡ ทำอยู่` },
            { id: "done", label: `✅ เสร็จ` }
          ].map(t => (
            <button
              key={t.id}
              className={`pill ${tab === t.id ? "coral" : "ghost"}`}
              style={{ fontSize: 11, padding: "6px 12px", flexShrink: 0, cursor: "pointer" }}
              onClick={() => setTab(t.id)}
            >{t.label}</button>
          ))}
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {filtered.map(h => (
            <div key={h.id} className="card" style={{ padding: 14, display: "flex", gap: 12, alignItems: "center" }}>
              <div style={{
                width: 50, height: 50, borderRadius: 14,
                background: `var(--${h.color})`,
                border: "2px solid var(--ink)",
                display: "grid", placeItems: "center", fontSize: 24, flexShrink: 0
              }}>{h.icon}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 14 }}>{h.title}</div>
                <div style={{ fontSize: 11, color: "var(--muted)", fontWeight: 600, marginBottom: 4 }}>
                  {h.tutor} · ส่ง {h.due}
                </div>
                <ProgressBar value={h.progress} max={100} color={h.color === "mint" ? "mint" : h.color === "sky" ? "sky" : "coral"} />
              </div>
              {h.status === "done"
                ? <span style={{ fontSize: 20 }}>✅</span>
                : <button className="btn sm primary" style={{ fontSize: 11, padding: "6px 12px" }}>ส่ง</button>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// =============== Mobile Rewards / Me / Profile ===============
const MobileMe = ({ go }) => {
  const xpPct = (ME.xp / ME.xpToNext) * 100;
  return (
    <div className="m-screen">
      <MobileHeader title="🏆 รางวัล & โปรไฟล์" />
      <div style={{ padding: "0 16px 100px" }}>
        {/* Profile hero */}
        <div className="card tint-yellow" style={{ padding: 16, marginBottom: 14, position: "relative", overflow: "hidden" }}>
          <Confetti count={12} />
          <div style={{ display: "flex", alignItems: "center", gap: 14, position: "relative", zIndex: 1 }}>
            <Stella size={90} hat />
            <div style={{ flex: 1 }}>
              <span className="sticker" style={{ background: "var(--coral)", color: "white", fontSize: 10 }}>
                🔥 STREAK {ME.streak} วัน
              </span>
              <h1 style={{ fontSize: 22, marginTop: 8 }}>{ME.name}</h1>
              <div style={{ fontSize: 12, fontWeight: 700, color: "var(--ink-soft)" }}>
                Level {ME.level} · Rising Star ⭐
              </div>
            </div>
          </div>
          <div style={{ marginTop: 12 }}>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, fontWeight: 800, marginBottom: 4 }}>
              <span>⚡ {ME.xp.toLocaleString()} XP</span>
              <span>→ Lv {ME.level + 1}</span>
            </div>
            <div className="bar" style={{ height: 14 }}>
              <span style={{ width: `${xpPct}%`, background: "linear-gradient(90deg, #FFD668, #F26666)" }} />
            </div>
          </div>
        </div>

        {/* Coins + Streak */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 14 }}>
          <div className="card" style={{ textAlign: "center", padding: 14 }}>
            <div style={{ fontSize: 32 }}>🪙</div>
            <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 24, color: "var(--coral-deep)" }}>{ME.coins}</div>
            <div style={{ fontSize: 10, fontWeight: 800, color: "var(--ink-soft)" }}>Tutoro Coins</div>
          </div>
          <div className="card" style={{ textAlign: "center", padding: 14 }}>
            <div style={{ fontSize: 32 }}>📚</div>
            <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 24, color: "var(--purple-deep)" }}>{ME.hoursTotal}</div>
            <div style={{ fontSize: 10, fontWeight: 800, color: "var(--ink-soft)" }}>ชม. ทั้งหมด</div>
          </div>
        </div>

        {/* Streak calendar */}
        <div className="m-section-title">🔥 Streak สัปดาห์นี้</div>
        <div style={{ display: "flex", gap: 4, marginTop: 8, marginBottom: 18 }}>
          {["จ.","อ.","พ.","พฤ.","ศ.","ส.","อา."].map((d, i) => {
            const done = i < 5;
            const today = i === 3;
            return (
              <div key={i} style={{
                flex: 1, padding: "10px 4px",
                borderRadius: 12,
                background: done ? "linear-gradient(160deg, #FFD668, #F26666)" : "var(--paper-2)",
                border: today ? "2px solid var(--ink)" : "1.5px solid var(--border)",
                textAlign: "center", color: done ? "white" : "var(--muted)"
              }}>
                <div style={{ fontSize: 9, fontWeight: 800, marginBottom: 2 }}>{d}</div>
                <div style={{ fontSize: 18 }}>{done ? "🔥" : "○"}</div>
              </div>
            );
          })}
        </div>

        {/* Achievements */}
        <div className="m-section-title">🏆 ความสำเร็จ</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginTop: 8, marginBottom: 18 }}>
          {ACHIEVEMENTS.map(a => (
            <div key={a.id} style={{
              padding: 12, textAlign: "center",
              borderRadius: 14,
              border: "2px solid var(--ink)",
              opacity: a.got ? 1 : 0.4,
              background: a.got ? `var(--${a.color})` : "var(--paper-2)",
              boxShadow: a.got ? "0 2px 0 var(--ink)" : "none",
              position: "relative"
            }}>
              <div style={{ fontSize: 32, filter: a.got ? "none" : "grayscale(1)" }}>{a.emoji}</div>
              <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 11, marginTop: 4 }}>{a.name}</div>
              {!a.got && <div style={{ position: "absolute", top: 4, right: 4, fontSize: 10 }}>🔒</div>}
            </div>
          ))}
        </div>

        {/* Shop */}
        <div className="m-section-title">🎁 ร้านแลกของรางวัล</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10, marginTop: 8, marginBottom: 18 }}>
          {[
            { name: "ส่วนลด 15%", coins: 200, icon: "🎟️", color: "coral" },
            { name: "Avatar Hat", coins: 150, icon: "🎩", color: "purple" },
            { name: "Sticker Pack", coins: 80, icon: "🌈", color: "sky" },
            { name: "Bonus คลาส", coins: 500, icon: "🎓", color: "yellow" }
          ].map((r, i) => {
            const canAfford = ME.coins >= r.coins;
            return (
              <div key={i} className={`card tint-${r.color}`} style={{ padding: 12, textAlign: "center" }}>
                <div style={{ fontSize: 36 }}>{r.icon}</div>
                <div style={{ fontFamily: "Baloo 2", fontWeight: 800, fontSize: 13, marginTop: 4 }}>{r.name}</div>
                <button
                  className="btn sm"
                  disabled={!canAfford}
                  style={{
                    width: "100%", marginTop: 8, fontSize: 11, padding: "6px 8px",
                    background: canAfford ? "var(--ink)" : "var(--paper-2)",
                    color: canAfford ? "white" : "var(--muted)"
                  }}
                >🪙 {r.coins}</button>
              </div>
            );
          })}
        </div>

        {/* Settings list */}
        <div className="m-section-title">⚙️ การตั้งค่า</div>
        <div className="card" style={{ padding: 0, marginTop: 8, overflow: "hidden" }}>
          {[
            { icon: "🟢", label: "เชื่อมต่อ LINE", val: "เชื่อมแล้ว" },
            { icon: "🔔", label: "การแจ้งเตือน", val: "เปิด" },
            { icon: "💳", label: "การชำระเงิน", val: "PromptPay" },
            { icon: "👨‍👩‍👧", label: "บัญชีผู้ปกครอง", val: "เพิ่ม" },
            { icon: "❓", label: "ช่วยเหลือ", val: "" }
          ].map((s, i, arr) => (
            <div key={i} style={{
              display: "flex", alignItems: "center", gap: 10, padding: "14px 16px",
              borderBottom: i < arr.length - 1 ? "1px solid var(--border)" : "none"
            }}>
              <span style={{ fontSize: 18, width: 28 }}>{s.icon}</span>
              <span style={{ flex: 1, fontWeight: 700, fontSize: 14 }}>{s.label}</span>
              {s.val && <span style={{ fontSize: 12, color: "var(--muted)", fontWeight: 600 }}>{s.val}</span>}
              <Icon name="arrow" size={14} color="#8b87a8" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// =============== Mobile App Shell ===============
const MobileApp = ({ booking, setBooking }) => {
  const [tab, setTab] = React.useState("home");
  const [params, setParams] = React.useState({});

  const go = (s, p = {}) => {
    setTab(s);
    setParams(p);
    window.scrollTo(0, 0);
  };

  // Tab id from main tabs
  const mainTabsId = ["home", "tutors", "schedule", "chat", "me"].includes(tab) ? tab : null;

  return (
    <div className="m-app">
      {tab === "home" && <MobileHome go={go} />}
      {tab === "tutors" && <MobileTutors go={go} />}
      {tab === "tutor" && <MobileTutorBooking tutorId={params.tutorId} go={go} onBook={setBooking} />}
      {tab === "schedule" && <MobileSchedule go={go} />}
      {tab === "classroom" && <MobileClassroom go={go} />}
      {tab === "chat" && <MobileChat go={go} />}
      {tab === "homework" && <MobileHomework go={go} />}
      {tab === "me" && <MobileMe go={go} />}

      {/* Hide nav inside classroom (immersive) */}
      {tab !== "classroom" && tab !== "tutor" && <MobileNav tab={mainTabsId || "home"} setTab={go} />}
    </div>
  );
};

Object.assign(window, {
  MobileNav, MobileHeader, MobileHome, MobileTutors, MobileTutorBooking,
  MobileSchedule, MobileChat, MobileClassroom, MobileHomework, MobileMe, MobileApp
});