/* ============================================================
   shell.jsx — Nav, Footer, ContactSection
   ============================================================ */

function Nav({ view, onNav }) {
  const links = [
  { id: "home", name: "หน้าแรก" },
  { id: "courses", name: "หลักสูตร" },
  { id: "teachers", name: "ครูผู้สอน" },
  { id: "pricing", name: "ค่าเรียน" },
  { id: "articles", name: "บทความ" },
  { id: "contact", name: "ติดต่อ" }];


  const click = (id) => (e) => {
    e.preventDefault();
    onNav(id);
  };

  return (
    <header className="nav">
      <div className="container nav-inner">
        <a href="#" className="brand-mark" onClick={click("home")}>
          <span className="logo">
            <img src="/logo-icon.png" alt="Baanmari Studio" style={{ display: "block", height: "44px", width: "44px", objectFit: "contain" }} />
          </span>
          <span className="name"><strong style={{ letterSpacing: "-0.5px", fontFamily: "ui-monospace" }}>Baanmari</strong></span>
        </a>
        <nav className="nav-links">
          {links.map((l) =>
          <a key={l.id} href={"#" + l.id} className={view === l.id ? "active" : ""} onClick={click(l.id)}>{l.name}</a>
          )}
        </nav>
        <button className="btn btn-primary" onClick={() => onNav("booking")}>
          ทดลองเรียนฟรี
        </button>
      </div>
    </header>);

}

function ContactSection() {
  return (
    <section className="section" id="contact">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">ติดต่อ · VISIT US</div>
            <h2 className="section-title">
              แวะ<em>มาเยี่ยม</em><br />บ้านของเรา
            </h2>
          </div>
          <p className="section-blurb">บางแคเหนือ ใกล้เพชรเกษม 3 มีที่จอดรถสะดวก ทดลองเรียนได้ทุกวัน นัดล่วงหน้าผ่าน LINE</p>
        </div>
        <div className="contact-grid">
          <div>
            <div className="contact-info-list">
              <div className="contact-item">
                <div className="ic">☎</div>
                <div>
                  <div className="label">โทรศัพท์</div>
                  <a href="tel:0825193245" className="val">082-519-3245</a>
                </div>
              </div>
              <div className="contact-item">
                <div className="ic">L</div>
                <div>
                  <div className="label">LINE Official</div>
                  <a href="https://line.me/R/ti/p/@baanmari" target="_blank" rel="noreferrer" className="val">@baanmari</a>
                </div>
              </div>
              <div className="contact-item">
                <div className="ic">f</div>
                <div>
                  <div className="label">Facebook</div>
                  <a href="https://facebook.com/baanmari" target="_blank" rel="noreferrer" className="val">facebook.com/baanmari</a>
                </div>
              </div>
              <div className="contact-item">
                <div className="ic">⌖</div>
                <div>
                  <div className="label">ที่อยู่</div>
                  <div className="val" style={{ lineHeight: 1.4 }}>
                    1380 หมู่บ้านเพชรเกษม 3<br />
                    ซ.25/1 บางแคเหนือ บางแค<br />
                    กรุงเทพฯ 10160
                  </div>
                </div>
              </div>
              <div className="contact-item">
                <div className="ic">⏱</div>
                <div>
                  <div className="label">เวลาทำการ</div>
                  <div className="val" style={{ fontSize: 16 }}>เปิดสอนทุกวัน · 09:00 – 21:00</div>
                </div>
              </div>
            </div>
          </div>
          <div className="map-card">
            <iframe
              src="https://www.google.com/maps?q=1380+%E0%B9%80%E0%B8%9E%E0%B8%8A%E0%B8%A3%E0%B9%80%E0%B8%81%E0%B8%A9%E0%B8%A1+3+%E0%B8%8B.25%2F1+%E0%B8%9A%E0%B8%B2%E0%B8%87%E0%B9%81%E0%B8%84%E0%B9%80%E0%B8%AB%E0%B8%99%E0%B8%B7%E0%B8%AD&output=embed"
              title="Baanmari Studio location"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              style={{ width: "100%", height: "100%", border: 0, display: "block" }}
              allowFullScreen>
            </iframe>
            <a
              href="https://maps.app.goo.gl/9DiK7gWxw94xmG5o7"
              target="_blank" rel="noreferrer"
              className="btn btn-sm"
              style={{ position: "absolute", top: 16, right: 16, background: "var(--bg-card)", zIndex: 2 }}>
              
              เปิดใน Google Maps ↗
            </a>
          </div>
        </div>
      </div>
    </section>);

}

function Footer({ onNav }) {
  const click = (id) => (e) => {e.preventDefault();onNav(id);};
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="brand-mark" style={{ marginBottom: 16 }}>
              <span className="logo">
                <img src="logo-icon.png" alt="" className="light-only" style={{ padding: "0px", height: "44px", width: "44px", margin: "1px", opacity: "1", objectFit: "contain" }} />
                <img src="logo-icon-cream.png" alt="" className="dark-only" />
              </span>
              <span className="name" style={{ padding: "0px", margin: "1px", height: "16px", width: "179px" }}>
                <strong style={{ letterSpacing: "-0.5px", margin: "1px", borderRadius: "0px", lineHeight: "1.05", fontFamily: "ui-monospace", padding: "0px", borderWidth: "0px", borderStyle: "solid" }}>Baanmari</strong>
                <em></em>
              </span>
            </div>
            <p style={{ color: "var(--ink-2)", fontSize: 14, maxWidth: 320, margin: 0 }}>
              Your Home, Your Music, Your Identity.<br />
              โรงเรียนสอนดนตรีสำหรับทุกวัย — ตั้งแต่ปี 2012
            </p>
          </div>
          <div>
            <h5>สำรวจ</h5>
            <ul>
              <li><a href="#" onClick={click("courses")}>หลักสูตร</a></li>
              <li><a href="#" onClick={click("teachers")}>ครูผู้สอน</a></li>
              <li><a href="#" onClick={click("pricing")}>ค่าเรียน</a></li>
              <li><a href="#" onClick={click("articles")}>บทความ</a></li>
            </ul>
          </div>
          <div>
            <h5>วิชาที่สอน</h5>
            <ul>
              <li><a href="#" onClick={click("courses")}>เปียโน</a></li>
              <li><a href="#" onClick={click("courses")}>ร้องเพลง</a></li>
              <li><a href="#" onClick={click("courses")}>เต้น</a></li>
              <li><a href="#" onClick={click("courses")}>กลอง</a></li>
              <li><a href="#" onClick={click("courses")}>กีตาร์</a></li>
            </ul>
          </div>
          <div>
            <h5>ติดต่อ</h5>
            <ul>
              <li>082-519-3245</li>
              <li>LINE: @baanmari</li>
              <li>FB: baanmari</li>
              <li style={{ color: "var(--ink-3)", fontSize: 12, marginTop: 6 }}>1380 เพชรเกษม 3 ซ.25/1<br />บางแคเหนือ บางแค กทม.</li>
            </ul>
          </div>
        </div>
        <div className="footer-base">
          <span>© {new Date().getFullYear()} Baanmari Studio — All rights reserved.</span>
          <span className="mono">Crafted with ♪ in Bangkok</span>
          <a href="#admin" onClick={e => { e.preventDefault(); onNav('login'); }}
            style={{ fontSize: 11, color: 'var(--ink-3)', opacity: 0.4, textDecoration: 'none', marginLeft: 8 }}
            title="ผู้ดูแลระบบ">⚙</a>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Nav, ContactSection, Footer });