/* innerbloom — Meditation, Events, Consultation */
const { useState: useStateM, useEffect: useEffectM, useRef: useRefM } = React;

function fmt(s) { const m = Math.floor(s / 60), r = Math.floor(s % 60); return m + ":" + String(r).padStart(2, "0"); }

/* ───────── COMING SOON ───────── */
function ComingSoon({ lang, title, eyebrow }) {
  return (
    <div className="scr fade">
      <div className="scr-scroll">
        <div className="lhead">
          <div className="ey">{eyebrow}</div>
          <h1>{title}</h1>
        </div>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "48px 32px", gap: 12 }}>
          <div style={{ fontSize: 44 }}>✦</div>
          <div style={{ fontSize: 18, fontWeight: 700, color: "var(--text-primary)" }}>
            {lang === "zh" ? "即将上线" : "Coming Soon"}
          </div>
          <div style={{ fontSize: 14, color: "var(--text-secondary)", textAlign: "center", lineHeight: 1.6 }}>
            {lang === "zh" ? "我们正在精心准备，敬请期待。" : "We're working on something special. Stay tuned."}
          </div>
        </div>
        <div className="tabpad"></div>
      </div>
    </div>
  );
}

/* ───────── MEDITATION ───────── */
function Meditation({ lang, onBack }) {
  return (
    <div className="scr fade">
      <PushHeader title={tt(lang, "med_t")} onBack={onBack} lang={lang} solid />
      <div className="scr-scroll pushed">
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", padding: "48px 32px", gap: 12 }}>
          <div style={{ fontSize: 44 }}>✦</div>
          <div style={{ fontSize: 18, fontWeight: 700, color: "var(--text-primary)" }}>
            {lang === "zh" ? "即将上线" : "Coming Soon"}
          </div>
          <div style={{ fontSize: 14, color: "var(--text-secondary)", textAlign: "center", lineHeight: 1.6 }}>
            {lang === "zh" ? "我们正在精心准备，敬请期待。" : "We're working on something special. Stay tuned."}
          </div>
        </div>
      </div>
    </div>
  );
}
window.Meditation = Meditation;

/* ───────── EVENTS ───────── */
function Events({ lang }) {
  return <ComingSoon lang={lang} title={tt(lang, "events_t")} eyebrow={lang === "zh" ? "即将到来" : "Upcoming"} />;
}
window.Events = Events;

/* ───────── CONSULTATION (pushed) ───────── */
function Consultation({ lang, onBack }) {
  const feats = lang === "zh"
    ? [
        { c: "var(--rb-red)", t: "60 分钟一对一", b: "为你现场解读你的数字。" },
        { c: "var(--rb-green)", t: "解读你的命卡", b: "阳历与阴历灵魂数字、关系，以及未来一年。" },
        { c: "var(--rb-blue)", t: "带上你的问题", b: "关系、时机、方向 —— 无论你正坐困于什么。" }
      ]
    : [
        { c: "var(--rb-red)", t: "60-minute 1:1 session", b: "A guided reading of your numbers." },
        { c: "var(--rb-green)", t: "Your chart, decoded", b: "Solar & lunar soul numbers, relationships, and the year ahead." },
        { c: "var(--rb-blue)", t: "Bring your questions", b: "Relationships, timing, direction — whatever you're sitting with." }
      ];
  return (
    <div className="scr fade">
      <PushHeader title={tt(lang, "consult_screen_t")} onBack={onBack} lang={lang} solid />
      <div className="scr-scroll pushed">
        <div className="consult-hero">
          <h2>{tt(lang, "consult_hero_t")}</h2>
          <p>{tt(lang, "consult_hero_s")}</p>
        </div>
        <div className="consult-list">
          {feats.map((f, i) => (
            <div key={i} className="consult-feature">
              <span className="dot" style={{ background: f.c }}></span>
              <div><div className="ft">{f.t}</div><div className="fb">{f.b}</div></div>
            </div>
          ))}
        </div>
        <div className="scr-pad" style={{ marginTop: 22 }}>
          <a className="btn-primary" href={CONSULT_URL} target="_blank" rel="noopener" style={{ textDecoration: "none" }}>
            <IbIcon.Calendar width="18" height="18" />{tt(lang, "consult_cta")}
          </a>
        </div>
        <div className="flowpad"></div>
      </div>
    </div>
  );
}
window.Consultation = Consultation;