// Pricing page

function PricingPage() {
  const { lang, go: _go } = useT();
  const { go } = useRouter();
  const L = window.I18N[lang].pricing;
  const tpls = window.TEMPLATES;

  return (
    <div className="page-enter">
      <section style={{ paddingTop: 60 }}>
        <div className="container-narrow center">
          <div className="eyebrow">{L.eyebrow} 💸</div>
          <h1 style={{ marginTop: 18 }}>{L.title}</h1>
          <p style={{ fontSize: "1.2rem" }}>{L.sub}</p>
        </div>
      </section>

      {/* Big price card */}
      <section style={{ paddingTop: 20 }}>
        <div className="container">
          <div className="card" style={{
            background: "var(--ink)",
            color: "var(--paper)",
            padding: 0,
            transform: "rotate(-0.5deg)",
            overflow: "hidden",
          }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }} className="price-grid">
              {/* Left: price */}
              <div style={{ padding: 50, position: "relative" }}>
                <Tape width={120} rotation={-4} color="var(--red)" style={{ top: -10, left: 40, opacity: 0.7 }} />
                <div className="hand" style={{ fontSize: "1.4rem", opacity: 0.8 }}>{lang === "th" ? "ราคาเดียว" : "one flat price"}</div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 8 }}>
                  <span className="display" style={{ fontSize: "clamp(4rem, 10vw, 7rem)", lineHeight: 1, color: "var(--green)" }}>590</span>
                  <span className="display" style={{ fontSize: "2rem", color: "var(--paper)" }}>฿</span>
                </div>
                <div className="hand" style={{ fontSize: "1.15rem", opacity: 0.7 }}>{L.perKid}</div>
                <a className="btn btn-red btn-big mt-4" href="#/booking" onClick={(e) => { e.preventDefault(); go("booking"); }}>
                  {lang === "th" ? "จองเลย" : "Book a workshop"} 🚀
                </a>
              </div>
              {/* Right: includes */}
              <div style={{ padding: 50, background: "var(--paper)", color: "var(--ink)" }}>
                <div className="display" style={{ fontSize: "1.3rem", marginBottom: 16 }}>{L.includes}</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                  {L.includesList.map((it, i) => (
                    <li key={i} style={{ display: "flex", gap: 12, padding: "8px 0", alignItems: "flex-start" }}>
                      <span style={{ color: "var(--green)", flexShrink: 0, fontWeight: 900, fontSize: "1.2rem" }}>✓</span>
                      <span>{it}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .price-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>

      {/* Templates */}
      <section>
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 32 }}>
            <div className="eyebrow">{lang === "th" ? "เลือกแม่แบบใดก็ได้" : "pick any template"}</div>
            <h2 style={{ marginTop: 18 }}>{lang === "th" ? "ทุกแม่แบบราคาเท่ากัน" : "All 4 templates, same price"}</h2>
          </div>
          <div className="grid grid-4">
            {tpls.map((t, i) => (
              <div key={t.id} className="card" style={{
                background: t.color, color: "#fff",
                transform: `rotate(${[-2,1.5,-1,2.5][i]}deg)`,
                minHeight: 240,
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
              }}>
                <div style={{ fontSize: "3.5rem", lineHeight: 1 }}>{t.emoji}</div>
                <div>
                  <div className="display" style={{ fontSize: "1.2rem" }}>{t[lang].name}</div>
                  <div className="hand" style={{ fontSize: "1.1rem", opacity: 0.95, marginBottom: 12 }}>{t[lang].tag}</div>
                  <div style={{ fontFamily: "var(--font-pixel)", fontSize: 11, opacity: 0.9 }}>90 MIN</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Add-ons */}
      <section className="paper-bg">
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 32 }}>
            <div className="eyebrow">{lang === "th" ? "ของเพิ่ม" : "add-ons"}</div>
            <h2 style={{ marginTop: 18 }}>{L.addonsTitle}</h2>
          </div>
          <div className="grid grid-3">
            {L.addons.map((a, i) => (
              <div key={i} className="card" style={{
                background: "var(--paper)",
                transform: `rotate(${[-1, 0.8, -1.5][i]}deg)`,
              }}>
                <div className="display" style={{ fontSize: "1.15rem", marginBottom: 8 }}>{a.t}</div>
                <div style={{ display: "inline-block", background: "var(--green)", color: "#fff", padding: "4px 12px", borderRadius: 99, fontFamily: "var(--font-display)", fontSize: "0.95rem", marginBottom: 12, border: "2px solid var(--ink)" }}>{a.price}</div>
                <p style={{ margin: 0 }}>{a.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Bottom CTA */}
      <section>
        <div className="container-narrow center">
          <h2>{L.ctaTitle}</h2>
          <Squiggle width={200} color="var(--red)" style={{ marginBottom: 24 }} />
          <a className="btn btn-blue btn-big" href="#/booking" onClick={(e) => { e.preventDefault(); go("booking"); }}>
            {lang === "th" ? "ไปจอง" : "Book a workshop"} →
          </a>
        </div>
      </section>
    </div>
  );
}

window.PricingPage = PricingPage;