/* ============================================================
   home.jsx — home page sections for Baanmari Studio
   Hero, Marquee, Courses, Teachers, Schedule, Pricing, Gallery, Reviews
   ============================================================ */

const DEFAULT_HERO = {
  eyebrow: "โรงเรียนสอนดนตรี · BANGKOK",
  titleLine1: "ที่นี่คือ",
  titleEm1: "บ้าน",
  titleLine2: "และ",
  titleEm2: "ดนตรี",
  titleLine3: "คือเสียงของเรา",
  tagline: "ที่บ้านมาริ เราเชื่อว่าดนตรีคือบ้านที่อบอุ่นของเสียงเล็กๆ จากนักเรียนทุกคน — ไม่ว่าคุณจะอายุ 4 ขวบ หรือ 75 ปี ที่นี่มีที่ของคุณ",
  btnPrimary: "ทดลองเรียนฟรี 30 นาที →",
  btnSecondary: "ดูหลักสูตรทั้งหมด",
};

function Hero({ layout, onCta, heroContent }) {
  const h = heroContent || DEFAULT_HERO;
  return (
    <section className="hero" data-layout={layout}>
      <div className="hero-inner container">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow">{h.eyebrow}</div>
            <h1 className="hero-title" style={{ fontFamily: "\"IBM Plex Sans Thai\"" }}>
              {h.titleLine1}<em style={{ fontFamily: "\"Noto Serif Display\"" }}>{h.titleEm1}</em><br />
              {h.titleLine2}<em>{h.titleEm2}</em><br />
              {h.titleLine3}
            </h1>
            <p className="hero-sub">
              {h.tagline}
            </p>
            <div className="hero-ctas">
              <button className="btn btn-primary" onClick={() => onCta("booking")}>
                {h.btnPrimary}
              </button>
              <button className="btn" onClick={() => onCta("courses")}>
                {h.btnSecondary}
              </button>
            </div>
          </div>
          {layout !== "bleed" &&
          <div className="hero-art">
              <div className="frame frame-1"><img src="uploads/IMG_20251228_232558 (1).jpg" alt="Baanmari Christmas Party" style={{ width: "100%", height: "100%", objectFit: "cover" }} /></div>
              <div className="frame frame-2"><img src="gallery/g41.jpg" alt="KAWAI Gold Medal" style={{ width: "100%", height: "100%", objectFit: "cover" }} /></div>
              <div className="frame frame-3">
                <div>เปิดสอน<br />ทุกวัน<br />09—21</div>
              </div>
            </div>
          }
          {layout === "bleed" &&
          <div className="hero-art">
              <div className="frame frame-1"><img src="uploads/IMG_20251228_232558 (1).jpg" alt="Baanmari Christmas Party" style={{ width: "100%", height: "100%", objectFit: "cover" }} /></div>
            </div>
          }
        </div>
      </div>
    </section>);

}

function Marquee() {
  const items = ["เปียโน", "ร้องเพลง", "เต้น", "กลอง", "กีตาร์", "การแสดง", "The Voice 2024", "The Golden Song S5", "A.T.O.D. Champion", "Recital ปีละ 2 ครั้ง", "ทดลองเรียนฟรี"];
  const loop = [...items, ...items];
  return (
    <div className="marquee" style={{ fontFamily: "sans-serif" }}>
      <div className="marquee-track">
        {loop.map((it, i) =>
        <span key={i}>
            {it}
            <span className="dot"></span>
          </span>
        )}
      </div>
    </div>);

}

function CoursesSection({ onBook, courses = COURSES }) {
  const [filter, setFilter] = React.useState("all");
  const [ageFilter, setAgeFilter] = React.useState("all");

  const filtered = courses.filter((c) => {
    if (filter !== "all" && c.id !== filter) return false;
    if (ageFilter === "kids" && !c.ages.match(/4|5|6/)) return false;
    if (ageFilter === "adults" && !c.ages.match(/[1-9][0-9]+/)) return false;
    return true;
  });

  const iconMap = { piano: "piano", vocal: "vocal", dance: "dance", drums: "drums", guitar: "guitar" };

  return (
    <section className="section" id="courses">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">หลักสูตร · COURSES</div>
            <h2 className="section-title">
              6 วิชา<br /><em style={{ fontFamily: "\"Noto Serif Display\"" }}>หนึ่ง</em>บ้านที่อบอุ่น
            </h2>
          </div>
          <p className="section-blurb">
            ทุกหลักสูตรออกแบบให้ยืดหยุ่นตามวัยและเป้าหมายของนักเรียน เลือกเรียนเดี่ยวหรือเรียนเป็นคู่ก็ได้
          </p>
        </div>

        <div className="course-filters">
          <span className="filter-label">วิชา</span>
          <button className={`chip ${filter === "all" ? "active" : ""}`} onClick={() => setFilter("all")}>ทั้งหมด</button>
          {courses.map((c) =>
          <button key={c.id} className={`chip ${filter === c.id ? "active" : ""}`} onClick={() => setFilter(c.id)}>{c.name}</button>
          )}
          <span className="filter-label" style={{ marginLeft: 16 }}>อายุ</span>
          <button className={`chip ${ageFilter === "all" ? "active" : ""}`} onClick={() => setAgeFilter("all")}>ทุกวัย</button>
          <button className={`chip ${ageFilter === "kids" ? "active" : ""}`} onClick={() => setAgeFilter("kids")}>เด็ก</button>
          <button className={`chip ${ageFilter === "adults" ? "active" : ""}`} onClick={() => setAgeFilter("adults")}>ผู้ใหญ่</button>
        </div>

        <div className="courses-grid">
          {filtered.map((c, idx) =>
          <article key={c.id} className={`course-card ${idx === 0 && filter === "all" && ageFilter === "all" ? "feature" : ""}`}>
              <div className="course-art">
                <CourseArt hue={c.hue} icon={iconMap[c.id]} />
              </div>
              <div className="course-body">
                <div className="course-meta">
                  {c.tag && <span className="course-tag">{c.tag}</span>}
                  <span className="course-tag">{c.ages}</span>
                  <span className="course-tag">{c.duration}</span>
                </div>
                <h3 style={{ fontFamily: "\"IBM Plex Sans Thai\"" }}>{c.name} <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", color: "var(--ink-3)", fontSize: "0.7em" }}>· {c.nameEn}</span></h3>
                <p>{c.desc}</p>
                <div className="course-foot">
                  <div className="course-price">฿{c.price}<small>/คาบ</small></div>
                  <button className="course-arrow" onClick={() => onBook(c.id)} aria-label="จองคลาส">→</button>
                </div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

function TeachersSection({ onSelect, teachers = TEACHERS }) {
  return (
    <section className="section" id="teachers" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">ครูผู้สอน · TEACHERS</div>
            <h2 className="section-title">
              <em>ครู</em>มืออาชีพ<br />ที่ตั้งใจฟังนักเรียน
            </h2>
          </div>
          <p className="section-blurb">
            ครูทุกท่านที่บ้านมาริเป็นนักดนตรี/นักแสดงอาชีพจริงๆ — ผ่าน The Voice Thailand, The Golden Song, A.T.O.D. International Dance และเวทีจริงในกรุงเทพ
          </p>
        </div>

        <div className="teachers-grid">
          {teachers.map((t) =>
          <article key={t.id} className="teacher-card" onClick={() => onSelect(t)}>
              <div className="teacher-portrait">
                {t.photo ?
              <img src={t.photo} alt={t.name} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} /> :
              <PortraitArt seed={t.portrait || 1} />
              }
              </div>
              <div className="teacher-body">
                <h4 style={{ fontFamily: "sans-serif" }}>{t.name}</h4>
                <div className="role">{t.role}</div>
                <div className="meta">
                  {t.subjects.map((s) => <span key={s} className="course-tag">{s}</span>)}
                </div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

function ScheduleStrip({ onBook }) {
  const days = ["จ", "อ", "พ", "พฤ", "ศ", "ส", "อา"];
  const week = React.useMemo(() => {
    const out = [];
    for (let row = 0; row < 5; row++) {
      const cells = [];
      for (let d = 0; d < 7; d++) {
        const r = (row * 7 + d) * 37 % 10;
        cells.push(r < 3 ? "taken" : r < 6 ? "free" : "");
      }
      out.push(cells);
    }
    return out;
  }, []);
  const times = ["09:00", "11:00", "14:00", "16:00", "18:00"];
  return (
    <section className="section" id="schedule">
      <div className="container">
        <div className="schedule-strip">
          <div>
            <div className="section-eyebrow" style={{ color: "rgba(255,255,255,0.6)" }}>ตารางเรียน · BOOK A SLOT</div>
            <h2 style={{ fontFamily: "sans-serif" }}>
              เลือก<em>เวลา</em>ที่<br />ใช่สำหรับคุณ
            </h2>
            <p>เปิดสอนทุกวัน 09:00 – 21:00 จองทดลองเรียนได้เลย ไม่มีค่าใช้จ่ายในการนัดครั้งแรก</p>
            <button className="btn btn-accent" style={{ marginTop: 28 }} onClick={onBook}>
              ทดลองเรียนฟรี →
            </button>
          </div>
          <div className="schedule-week">
            <div className="week-head">
              <span style={{ fontFamily: "sans-serif" }}>สัปดาห์นี้</span>
              <span style={{ opacity: 0.6, fontFamily: "var(--font-body)", fontSize: 12 }}>‹ ·  ›</span>
            </div>
            <div className="schedule-grid">
              {days.map((d) => <div key={d} className="day-name">{d}</div>)}
              {week.map((row, i) =>
              row.map((cell, j) =>
              <div key={`${i}-${j}`} className={`slot ${cell}`} title={times[i]}>
                    {j === 0 ? times[i] : "·"}
                  </div>
              )
              )}
            </div>
            <div style={{ display: "flex", gap: 14, fontSize: 11, marginTop: 14, opacity: 0.75 }}>
              <span><span style={{ display: "inline-block", width: 8, height: 8, borderRadius: 2, background: "oklch(0.42 0.03 55)", marginRight: 4 }}></span>ว่าง</span>
              <span><span style={{ display: "inline-block", width: 8, height: 8, borderRadius: 2, background: "oklch(0.24 0.02 55)", marginRight: 4 }}></span>เต็ม</span>
            </div>
          </div>
        </div>
      </div>
    </section>);
}

function AboutSection() {
  return (
    <section className="section" id="about">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 64, alignItems: "center" }} className="about-grid">
          <div>
            <div className="section-eyebrow">เกี่ยวกับเรา · ABOUT</div>
            <h2 className="section-title">
              เริ่มที่<em style={{ fontFamily: "\"IBM Plex Sans Thai\"" }}>บ้าน</em><br />ของครูเนม
            </h2>
            <div style={{ marginTop: 28, color: "var(--ink-2)", fontSize: 16, lineHeight: 1.75 }}>
              <p>บ้านมาริ สตูดิโอ เริ่มต้นการเดินทางในปี 2022 จากห้องเรียนเปียโนเล็กๆ ในบ้านของ ครูเนม ที่ตอนนั้นมีนักเรียนเพียงแค่ 4 คน... จนกระทั่งบ้านหลังนี้เริ่มมีสีสันและท่วงทำนองที่สมบูรณ์ยิ่งขึ้น เมื่อ ครูแต้ว (ครูสอนร้องเพลงจากเวที The Voice Thailand Season 7 และหวานใจของครูเนม) เข้ามาเติมเต็มชีวิตชีวาผ่านเสียงร้องเพลง</p>
              <p>วันนี้... จากห้องเรียนเล็กๆ ได้เติบโตกลายเป็นครอบครัวดนตรีที่ใหญ่ขึ้น มีเสียงเพลงและเสียงหัวเราะดังขึ้นกว่าเดิม แต่สิ่งหนึ่งที่เราสองคนตั้งใจและพยายามรักษาไว้ให้เหมือนวันแรกเสมอ คือความเป็น 'บ้าน' <em style={{ fontFamily: "var(--font-display)" }}></em> ที่นักเรียนทุกวัย ไม่ว่าจะเป็นน้องอนุบาลที่กำลังเรียนกดคีย์แรก หรือคุณป้าที่กลับมาเริ่มใหม่ — รู้สึกว่าตัวเองมีที่ทางตรงนี้</p>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <div style={{ background: "var(--bg-card)", border: "1px solid var(--line-soft)", borderRadius: "var(--radius-lg)", aspectRatio: "3/4", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "8%", position: "relative" }}>
              <img src="logo.png" alt="Baanmari Studio" className="light-only" style={{ width: "100%", maxWidth: 280, height: "auto" }} />
              <img src="logo-cream.png" alt="Baanmari Studio" className="dark-only" style={{ width: "100%", maxWidth: 280, height: "auto" }} />
              <div className="mono" style={{ position: "absolute", top: 16, left: 18, color: "var(--ink-3)" }}>EST · 2022</div>
              <div className="mono" style={{ position: "absolute", bottom: 16, right: 18, color: "var(--ink-3)" }}>BANGKOK · TH</div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <Stat n="14+" label="ปีของการสอน" />
              <Stat n="180+" label="นักเรียนปัจจุบัน" />
              <Stat n="6" label="ครูประจำ" />
              <Stat n="1/ปี" label="Recital ใหญ่" />
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Stat({ n, label }) {
  return (
    <div style={{ background: "var(--bg-card)", border: "1px solid var(--line-soft)", borderRadius: "var(--radius)", padding: "20px 24px" }}>
      <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 40, lineHeight: 1, color: "var(--accent)" }}>{n}</div>
      <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 6, letterSpacing: "0.08em", textTransform: "uppercase" }}>{label}</div>
    </div>);

}

function PricingSection({ onBook, onInstallment, pricing }) {
  const plans = pricing || DEFAULT_PRICING;
  return (
    <section className="section" id="pricing" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">อัตราค่าเรียน · PRICING</div>
            <h2 className="section-title">
              เลือก<em>แพ็กเกจ</em><br />ที่ใช่
            </h2>
          </div>
          <p className="section-blurb">ไม่มีค่าแรกเข้า ค่าหนังสือเรียนต่างหากตามจริง</p>
        </div>
        <div className="pricing-grid">
          {plans.map(plan => (
            <div key={plan.id} className={`price-col${plan.featured ? " featured" : ""}`}>
              {plan.featured && (
                <span className="course-tag" style={{ background: "var(--accent)", color: "white", borderColor: "var(--accent)", alignSelf: "flex-start", marginBottom: 12 }}>POPULAR</span>
              )}
              <h4>{plan.title}</h4>
              <div className="price-num">
                <sup>฿</sup>{plan.price}
                {plan.priceRange && (
                  <small style={{ fontStyle: "normal", fontSize: 14, fontFamily: "var(--font-body)", marginLeft: 6, color: "var(--ink-3)" }}>{plan.priceRange}</small>
                )}
              </div>
              <div className="price-per">{plan.per}</div>
              <ul>
                {plan.features.map((f, i) => <li key={i}>{f}</li>)}
              </ul>
              <button className={`btn${plan.featured ? " btn-accent" : ""}`} onClick={onBook}>เลือก →</button>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 28, textAlign: "center" }}>
          <div style={{ marginBottom: 16 }}>
            <button className="btn btn-primary" style={{ paddingLeft: 32, paddingRight: 32 }} onClick={onInstallment}>
              ซื้อแพ็กเกจ ผ่อน 0% สูงสุด 10 งวด →
            </button>
          </div>
          <div style={{ fontSize: 13, color: "var(--ink-3)" }}>
            เรียนเป็นคู่ (พี่น้อง / พ่อแม่-ลูก) ลดเพิ่ม 10% ต่อคน · สอบถามได้ทาง LINE
          </div>
        </div>
      </div>
    </section>);

}

const DEFAULT_GALLERY = [
  { img: "gallery/g09.jpg", label: "Recital · ธ.ค. 2025", c: "wide" },
  { img: "gallery/g02.jpg", label: "ลองชุดเพื่อไปประกวดร้องเพลง", c: "tall" },
  { img: "gallery/g07.jpg", label: "Mini Concert", c: "" },
  { img: "gallery/g10.jpg", label: "คลาสบัลเลต์เด็กเล็ก", c: "" },
  { img: "gallery/g03.jpg", label: "ลองชุดเพื่อเตรียมอัดคลิปร้องเพลง", c: "wide" },
  { img: "gallery/g08.jpg", label: "Vocal Camp", c: "" },
  { img: "gallery/g04.jpg", label: "ห้องเปียโน 2", c: "" },
  { img: "gallery/g14.jpg", label: "TTMC1", c: "tall" },
  { img: "gallery/g05.jpg", label: "เปียโน one-on-one", c: "" },
  { img: "gallery/g11.jpg", label: "คลาสเต้นสำหรับผู้ใหญ่", c: "" },
  { img: "gallery/g12.jpg", label: "คลาสเต้นเด็กโต", c: "wide" },
  { img: "gallery/g13.jpg", label: "Asia Arts Festival", c: "" },
  { img: "gallery/g15.jpg", label: "TTMC2", c: "" },
  { img: "gallery/g16.jpg", label: "TTMC3", c: "tall" },
  { img: "gallery/g17.jpg", label: "รับใบประกาศงานประกวดเปียโน1", c: "" },
  { img: "gallery/g18.jpg", label: "นักเรียนของเรา", c: "" },
];

const DEFAULT_REVIEWS = [
  { id: "r1", name: "ชญาน ศิริศร", rating: 5, text: "ลูกสาวเรียนเปียโนกับครูเนมมาแล้ว 6 เดือน ทีแรกไม่ชอบไปเรียน แต่ตอนนี้ตั้งใจเรียนทุกครั้ง ชอบครูเนมและหนึ่งในครูมาก คุณครูอดทนสอนและท่าทีการสอนน่ารัก" },
  { id: "r2", name: "จิรา ปิยะนิตย์", rating: 5, text: "ลูกชายเรียนร้องเพลงกับครูแต้วไป 3 เดือน ได้เรียนจากครูที่มีประสบการณ์จริงๆ ทรเพลงแนะนำดี เขาบอกว่าครูสนใจในตัวเขา ไม่ใช่แค่ได้เงินสอน ชอบบ้านมาริจริง" },
  { id: "r3", name: "นรินทร์ โพธิเพียร", rating: 5, text: "เรียนกีตาร์อยู่ครึ่งปี บรรยากาศเรียนชิลและสะดวกสบาย ครูอธิบายเรื่องทฤษฎีเพลงตัวจริงแล้ว ไม่ได้สอนแค่เล่นเพลง อยากเรียนต่อเลยกับบ้านมาริ" },
];

function GallerySection({ gallery }) {
  const items = gallery || DEFAULT_GALLERY;

  return (
    <section className="section" id="gallery">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">ผลงานนักเรียน · GALLERY</div>
            <h2 className="section-title">
              ช่วงเวลา<em>เล็กๆ</em><br />ที่บ้านมาริ
            </h2>
          </div>
          <p className="section-blurb">ภาพจาก recital, workshop, และวันเรียนปกติของน้องๆ และนักเรียนผู้ใหญ่ของเรา</p>
        </div>
        <div className="gallery-grid">
          {items.map((it, i) =>
          <div key={i} className={`gallery-item ${it.c}`}>
              <img src={it.img} alt={it.label} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              <span className="gallery-cap">{it.label}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function ReviewsSection({ reviews }) {
  const items = reviews || DEFAULT_REVIEWS;
  return (
    <section className="section" id="reviews" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">รีวิว · FROM FAMILIES</div>
            <h2 className="section-title">
              คำบอกเล่าจาก<br /><em>ผู้ปกครอง</em>และนักเรียน
            </h2>
          </div>
        </div>
        <div className="reviews-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: 24, marginTop: 40 }}>
          {items.map((r) =>
          <div key={r.id} className="review-card" style={{ background: "var(--bg)", border: "1px solid var(--line-soft)", borderRadius: "var(--radius-lg)", padding: 28 }}>
              <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
                {Array(r.rating).fill(0).map((_, i) => <span key={i} style={{ fontSize: 16, color: "var(--accent)" }}>★</span>)}
              </div>
              <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--ink)", marginBottom: 20 }}>{r.text}</p>
              <div style={{ borderTop: "1px solid var(--line-soft)", paddingTop: 16 }}>
                <div style={{ fontWeight: 600, color: "var(--ink)" }}>{r.name}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function TeacherModal({ teacher, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => {if (e.key === "Escape") onClose();};
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [onClose]);
  if (!teacher) return null;
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="ปิด">×</button>
        <div className="modal-portrait">
          {teacher.photo ?
          <img src={teacher.photo} alt={teacher.name} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} /> :
          <PortraitArt seed={teacher.portrait || 1} />
          }
        </div>
        <div className="modal-body">
          <h3>{teacher.name}</h3>
          <div className="role">{teacher.role} · {teacher.nameEn}</div>
          <p>{teacher.bio}</p>
          {teacher.achievements && teacher.achievements.length > 0 &&
          <div className="modal-achievements">
              <div className="ach-head">ผลงานและประสบการณ์</div>
              <ul>
                {teacher.achievements.map((a, i) => <li key={i}>{a}</li>)}
              </ul>
            </div>
          }
          {teacher.skills &&
          <div className="modal-skills">
              <div style={{ fontSize: 12, color: "var(--ink-3)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 4 }}>ทักษะ</div>
              {teacher.skills.map(([name, val]) =>
            <div key={name} className="skill-row">
                  <span className="name">{name}</span>
                  <span className="bar"><span className="bar-fill" style={{ width: `${val}%` }}></span></span>
                  <span className="val">{val}</span>
                </div>
            )}
            </div>
          }
          {teacher.quote &&
          <blockquote style={{ margin: "24px 0 0", padding: "16px 0 0", borderTop: "1px dashed var(--line-soft)", fontFamily: "var(--font-thai-display)", fontSize: 18, color: "var(--ink)", fontStyle: "italic" }}>
              "{teacher.quote}"
            </blockquote>
          }
        </div>
      </div>
    </div>);

}

Object.assign(window, {
  Hero, Marquee, CoursesSection, TeachersSection, ScheduleStrip,
  AboutSection, PricingSection, GallerySection, ReviewsSection, TeacherModal,
  DEFAULT_GALLERY, DEFAULT_REVIEWS, DEFAULT_HERO
});