/* ==========================================================
   首頁 sections: Hero / Origin / Deity / Events / Visit / Charms
   ========================================================== */

const Hero = () => (
  <section className="hero" id="top">
    <div className="bg"></div>

    <div className="lanterns" aria-hidden="true">
      {[0,1,2,3,4,5].map(i => (
        <div className="lantern" key={i}>
          <div className="string"></div>
          <div className="body"></div>
          <div className="tassel"></div>
        </div>
      ))}
    </div>

    <div className="inner">
      <div className="copy">
        <div className="kicker">
          TAIPEI · DA·AN<span className="dot"></span>OFFICIAL TEMPLE
        </div>
        <h1>
          夜啼為號，<br/>
          <span className="accent">梟婆庇民。</span>
        </h1>
        <p className="lead">
          大安梟婆宮，主祀夜行庇民之梟婆神娘娘，貓頭鷹之形，雙翼蔽月。
          凡求安宅、招財、結緣、開智者，皆得入宮一拜。
          香火不熄，誠則靈，靈則應。
        </p>
        <div className="hero-actions">
          <a href="fortune.html" className="btn btn-primary">
            線上求籤 <span className="ar">→</span>
          </a>
          <a href="#deity" className="btn btn-ghost">
            認識梟婆神
          </a>
        </div>
      </div>

      <div className="hero-logo-card">
        <div className="ring-text" aria-hidden="true">
          <svg viewBox="0 0 200 200">
            <defs>
              <path id="ringPath" d="M100,100 m-92,0 a92,92 0 1,1 184,0 a92,92 0 1,1 -184,0" />
            </defs>
            <text>
              <textPath href="#ringPath" startOffset="0">
                台北大安梟婆宮　·　DA·AN　XIAO·PO　GONG　·　夜啼為號　雲端有靈　·　誠則靈　·　
              </textPath>
            </text>
          </svg>
        </div>
        <img src="assets/logo.png" alt="大安梟婆宮 logo" />
      </div>
    </div>

    <div className="scroll-hint">SCROLL</div>
  </section>
);

const Origin = () => (
  <section className="origin" id="origin">
    <div className="wrap">
      <SectionHead kicker="沿革" title="夜啼為號，香煙為信" latin="The Origin" />
      <div className="origin-grid">
        <div className="vert-block" aria-hidden="false">
          <div className="vert-text big">大安梟婆宮志</div>
          <div className="vert-text">
            西元二零二零年，宮主夜夢有貓頭鷹形之神娘娘，立於月下啼鳴三聲，告以「夜行庇民，建宮以記」。
          </div>
          <div className="vert-text">
            遂於大安庄擇地立祠，奉曰「梟婆神娘娘」。後信眾日增，香火傳遍，今號「大安梟婆宮」。
          </div>
          <div className="vert-text">
            傳神性夜行，雙翼蔽月，能驅煞祟、引迷舟、結良緣。凡夜半啼於屋簷者，皆為神巡夜也，宜焚香淨案以待之。
          </div>
        </div>
        <div className="horiz-copy">
          <h3>始於<span>西元二零二零</span>　立於大安庄</h3>
          <p>
            本宮始建於西元二零二零年，由宮主夢中受梟婆神娘娘之諭立宮。
            最初僅為小祠一座，立於大安森林公園附近。歷經五載增修，
            漸成今日「一宮三殿七香爐」之格局。
          </p>
          <p>
            主神金身為夜行貓頭鷹形，雙翼舒展，足踏祥雲。
            左右脅侍為「日進斗金」與「梟婆發財」二童子；
            並增祀文昌、註生娘娘與「綠界廟」招財雙喵神。
          </p>
          <p>
            二零二五年起，本宮設「線上參拜系統」與「綠界廟」電子供奉服務，
            信眾得於千里之外焚香獻燈，傳統與時並進，誠心不改。
          </p>

          <div className="stats">
            <div className="item">
              <div className="num">6</div>
              <div className="lbl">年香火不熄</div>
            </div>
            <div className="item">
              <div className="num">3</div>
              <div className="lbl">主殿　七香爐</div>
            </div>
            <div className="item">
              <div className="num">12<span style={{fontSize:"20px"}}>萬</span></div>
              <div className="lbl">年信眾足跡</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Deity = () => (
  <section className="deity" id="deity">
    <div className="wrap">
      <SectionHead kicker="主祀神祇" title="梟婆神娘娘" latin="The Owl Goddess" />
      <div className="deity-grid">
        <div className="shrine-frame">
          <div className="glow"></div>
          <span className="seal seal-stamp">梟婆發財</span>
          <img src="assets/shrine.png" alt="梟婆神龕" />
          <div className="floor-ring"></div>
        </div>
        <div className="deity-copy">
          <div className="titles">
            <span className="ch brush-glyph">梟婆神娘娘</span>
            <span className="en">XIAO · PO</span>
          </div>
          <h3>夜行庇民　貓頭鷹形　雙翼蔽月</h3>
          <p className="desc">
            梟婆神娘娘，貓頭鷹之形，肩生雙翼，能於夜半巡查人間。
            善見者得安寧，犯禁者夜聞啼。本宮所祀金身為夜行貓頭鷹之姿，
            手持竹笏，足下踏雲。左右脅侍為「日進斗金」與「梟婆發財」二童子。
          </p>
          <div className="deity-attrs">
            <div className="attr">
              <div className="lbl">Patronage</div>
              <div className="val">夜安　／　行旅　／　夢境</div>
            </div>
            <div className="attr">
              <div className="lbl">Birthday</div>
              <div className="val">農曆五月十八</div>
            </div>
            <div className="attr">
              <div className="lbl">Offerings</div>
              <div className="val">清茶　／　桂圓　／　白米</div>
            </div>
            <div className="attr">
              <div className="lbl">Color</div>
              <div className="val">朱砂　／　松綠　／　金</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Events = () => (
  <section className="events" id="events">
    <div className="wrap">
      <SectionHead kicker="近期法會" title="年度祭典與道場" latin="Upcoming Rites" />
      <div className="event-grid">
        {EVENTS.map((e, i) => (
          <div className="event-card" key={i}>
            <div className="date">
              <span className="dd">{e.dd}</span>
              <span className="mm">{e.mm}</span>
              <span className="lunar">{e.lunar}</span>
            </div>
            <h4>{e.title}</h4>
            <p className="desc">{e.desc}</p>
            <div className="meta">
              <span className="tag">{e.tag}</span>
              <span>REGISTER →</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Charms = () => (
  <section className="charms" id="charms">
    <div className="wrap">
      <SectionHead kicker="平安賜物" title="開光信物　梟婆親賜" latin="Blessed Charms" />
      <div className="charm-grid">
        {CHARMS.map((c, i) => (
          <div key={i} className="charm-card"
               onClick={() => window.__xpgToast && window.__xpgToast("已加入信物", `${c.name}　${c.desc}`)}>
            <div className="crown">{c.crown}</div>
            <div className="glyph brush-glyph">{c.glyph}</div>
            <div className="name">{c.name}</div>
            <div className="desc">{c.desc}</div>
            <div className="price-row">
              <span className="price"><span className="cur">NT$ </span>{c.price}</span>
              <span className="stock">{c.stock}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Visit = () => (
  <section className="visit" id="visit">
    <div className="wrap">
      <SectionHead kicker="參拜資訊" title="駕臨本宮" latin="Find the Temple" />
      <div className="visit-grid">
        <div className="visit-info">
          <div className="row">
            <span className="label">地　址</span>
            <span className="value">
              台北市大安區夜啼里三巷十八之一號
              <span className="sub">No. 18-1, Lane 3, Yeti Rd., Da’an Dist., Taipei City</span>
            </span>
          </div>
          <div className="row">
            <span className="label">開放時間</span>
            <span className="value">
              每日　卯時至戌時　（06:00 – 21:00）
              <span className="sub">夜啼日（每月十八）通宵開放至子時</span>
            </span>
          </div>
          <div className="row">
            <span className="label">交　通</span>
            <span className="value">
              捷運大安站 5 號出口 · 步行約 7 分鐘
              <span className="sub">公車：237 / 285 / 復興幹線　復興大安路口下車</span>
            </span>
          </div>
          <div className="row">
            <span className="label">服務專線</span>
            <span className="value">
              請洽廟埕服務台
              <span className="sub">服務時間：每日 09:00 – 18:00</span>
            </span>
          </div>
          <div className="row">
            <span className="label">參拜須知</span>
            <span className="value">
              請著整潔衣著　禁葷食入廟　香爐三炷為限
              <span className="sub">廟內歡迎街貓駐留，請勿驅趕；牠們是梟婆神的耳目。</span>
            </span>
          </div>
        </div>

        <div className="map-card" aria-label="位置示意圖">
          <div className="compass">
            <div className="n">北</div>
            N
          </div>
          <div className="map-vis">
            <div className="road h" style={{top: "35%"}}></div>
            <div className="road h" style={{top: "72%"}}></div>
            <div className="road v" style={{left: "30%"}}></div>
            <div className="road v" style={{left: "68%"}}></div>
            <div className="pin">
              <div className="pulse"></div>
              <div className="dot"></div>
              <div className="label">大安梟婆宮</div>
            </div>
          </div>
          <div className="map-foot">
            <span>LAT 25.0260</span>
            <span>LNG 121.5440</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Hero, Origin, Deity, Events, Charms, Visit });