// About page

function AboutPage() {
  const { lang } = useT();
  const L = window.I18N[lang].about;
  const team = [
    { name: "P'May", role: lang === "th" ? "หัวหน้าทำเล่น" : "Head of Play", emoji: "🎨", color: "var(--red)" },
    { name: "Krit", role: lang === "th" ? "วิศวกรเวทมนตร์" : "Magic Engineer", emoji: "🧙", color: "var(--blue)" },
    { name: "Nat", role: lang === "th" ? "ครูใหญ่แล็บ" : "Lab Lead", emoji: "🔬", color: "var(--green)" },
    { name: "Aey", role: lang === "th" ? "ป้าคาเฟ่" : "Cafe Boss", emoji: "☕", color: "var(--orange)" },
  ];

  return (
    <div className="page-enter">
      <section style={{ paddingTop: 60 }}>
        <div className="container-narrow">
          <div className="eyebrow">{L.eyebrow} 📖</div>
          <h1 style={{ marginTop: 18, marginBottom: 24 }}>{L.title}</h1>
          <p style={{ fontSize: "1.35rem", lineHeight: 1.5, fontFamily: "var(--font-hand)" }}>{L.lede}</p>
          <p style={{ fontSize: "1.15rem" }}>{L.p1}</p>
          <p style={{ fontSize: "1.15rem" }}>{L.p2}</p>
        </div>
      </section>

      {/* Values grid */}
      <section>
        <div className="container">
          <div className="grid grid-4">
            {L.values.map((v, i) => (
              <div key={i} className="card" style={{
                background: ["var(--red)","var(--blue)","var(--green)","var(--orange)"][i],
                color: "#fff",
                transform: `rotate(${[-2,1.5,-1,2][i]}deg)`,
                minHeight: 200,
              }}>
                <div style={{ fontSize: "2.4rem", marginBottom: 8 }}>{["✏️","🎮","💥","☕"][i]}</div>
                <div className="display" style={{ fontSize: "1.1rem", marginBottom: 8 }}>{v.t}</div>
                <p style={{ margin: 0, opacity: 0.95 }}>{v.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Lab photos */}
      <section className="paper-bg">
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 40 }}>
            <div className="eyebrow">{L.labEyebrow}</div>
            <h2 style={{ marginTop: 18 }}>{L.labTitle}</h2>
          </div>
          <div className="grid grid-3">
            {[
              { c: "var(--red)", label: lang === "th" ? "พื้นที่วาด" : "drawing zone", icon: "✏️" },
              { c: "var(--blue)", label: lang === "th" ? "บูธอัดเสียง" : "sound booth", icon: "🎤" },
              { c: "var(--green)", label: lang === "th" ? "สถานีบิลด์เกม" : "build station", icon: "💻" },
              { c: "var(--orange)", label: lang === "th" ? "หน้าจอจัดแสดง" : "wall of fame", icon: "🏆" },
              { c: "var(--purple)", label: lang === "th" ? "ปาร์ตี้ลานม่วน" : "party patio", icon: "🎉" },
              { c: "var(--ink)", label: lang === "th" ? "บูธ Pixel Cafe" : "Pixel Cafe", icon: "☕" },
            ].map((p, i) => (
              <div key={i} className="card" style={{
                padding: 0, overflow: "hidden",
                transform: `rotate(${[-1.5,1,-0.5,1.2,-1,0.8][i]}deg)`,
                background: p.c,
                color: p.c === "var(--ink)" ? "var(--paper)" : "#fff",
                aspectRatio: "4 / 3",
              }}>
                <div style={{
                  background: "rgba(255,255,255,0.15)",
                  border: "2px dashed rgba(255,255,255,0.5)",
                  margin: 12,
                  height: "calc(100% - 24px)",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "center",
                  borderRadius: 8,
                }}>
                  <div style={{ fontSize: "3.6rem" }}>{p.icon}</div>
                  <div className="hand" style={{ fontSize: "1.1rem", marginTop: 8, opacity: 0.85, fontFamily: "monospace" }}>[ {p.label} ]</div>
                </div>
              </div>
            ))}
          </div>
          <p className="hand center" style={{ fontSize: "1.1rem", marginTop: 20, opacity: 0.65 }}>
            {lang === "th" ? "(รูปจริงเร็วๆนี้ ตอนนี้ใส่ผ้ากันเปื้อนรอก่อน)" : "(real photos coming soon — currently wearing aprons and waiting)"}
          </p>
        </div>
      </section>

      {/* Team */}
      <section>
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 40 }}>
            <div className="eyebrow">{L.teamEyebrow}</div>
            <h2 style={{ marginTop: 18 }}>{L.teamTitle}</h2>
          </div>
          <div className="grid grid-4">
            {team.map((t, i) => (
              <div key={i} className="card center" style={{
                background: "var(--paper)",
                transform: `rotate(${[-2,1.5,-1,2.5][i]}deg)`,
              }}>
                <div style={{
                  width: 110, height: 110, borderRadius: "50%",
                  background: t.color, border: "3px solid var(--ink)",
                  display: "grid", placeItems: "center",
                  fontSize: "3.5rem",
                  margin: "0 auto 12px",
                  boxShadow: "4px 4px 0 var(--ink)",
                }}>
                  {t.emoji}
                </div>
                <div className="display" style={{ fontSize: "1.2rem" }}>{t.name}</div>
                <div className="hand" style={{ fontSize: "1.05rem", opacity: 0.75 }}>{t.role}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

window.AboutPage = AboutPage;