/* global React */

// ---------------------------------------------------------------
// subpage-sections.jsx — sections used by the sub-pages.
// CoachingHero — page hero with photo + summary
// PathwayList — bulleted "what we work on" lists, with checks
// PricingTable — simple cards
// FAQ — accordion-less FAQ list
// EventsList — seminars listing with filters (visual only)
// CTAStrip — slim contact strip
// ---------------------------------------------------------------

// ---- PageHero ------------------------------------------------
function PageHero({ eyebrow, title, accent, lede, image, tags, base = "" }) {
  return (
    <section style={{ background: "var(--paper)", padding: "80px 0 64px", position: "relative" }}>
      <PageFrame>
        <div style={{ display: "grid", gridTemplateColumns: image ? "1.2fr 1fr" : "1fr", gap: 56, alignItems: "center" }}>
          <div>
            <Eyebrow>{eyebrow}</Eyebrow>
            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 500,
              fontSize: "clamp(46px, 5.6vw, 80px)", lineHeight: 1.04,
              letterSpacing: "-.015em", color: "var(--ink)",
              margin: "20px 0 22px", maxWidth: image ? "13ch" : "20ch",
            }}>
              {title}{accent ? <> <em style={{ fontStyle: "italic", color: "var(--coral-deep)", fontWeight: 400 }}>{accent}</em></> : null}
            </h1>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 19, lineHeight: 1.6, color: "var(--fg-2)", margin: 0, maxWidth: "48ch" }}>
              {lede}
            </p>
          </div>
          {image && (
            <div style={{ position: "relative" }}>
              <div aria-hidden style={{
                position: "absolute", top: 20, right: -12, width: "92%", height: "92%",
                background: "var(--coral-wash)", borderRadius: 22, zIndex: 0,
              }}/>
              <img src={base + "assets/" + image} alt="" style={{
                position: "relative", zIndex: 1, width: "100%",
                aspectRatio: "4/5", objectFit: "cover", borderRadius: 22,
                boxShadow: "var(--shadow-3)", display: "block",
              }}/>
              {tags && tags.length > 0 && (
                <div style={{ position: "relative", zIndex: 1, display: "flex", flexWrap: "wrap", gap: 8, marginTop: 16 }}>
                  {tags.map((tag, i) => (
                    <span key={i} style={{
                      fontFamily: "var(--font-body)", fontWeight: 500, fontSize: 12,
                      padding: "4px 12px", borderRadius: 999,
                      background: "var(--paper-2)", color: "var(--fg-2)",
                      border: "1px solid var(--border-1)",
                    }}>{tag}</span>
                  ))}
                </div>
              )}
            </div>
          )}
        </div>
      </PageFrame>
    </section>
  );
}

// ---- PathwayList — list of "we work on" bullets -------------
function PathwayList({ eyebrow, title, accent, columns = [] }) {
  return (
    <section style={{ background: "var(--paper-2)", padding: "96px 0" }}>
      <PageFrame>
        <div style={{ maxWidth: 700, marginBottom: 48 }}>
          <Eyebrow>{eyebrow}</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 500,
            fontSize: "clamp(36px, 4vw, 52px)", lineHeight: 1.08,
            color: "var(--ink)", margin: "18px 0 0",
          }}>
            {title}{accent ? <> <em style={{ fontStyle: "italic", color: "var(--coral-deep)", fontWeight: 400 }}>{accent}</em></> : null}
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: `repeat(${columns.length}, 1fr)`, gap: 24 }} data-ca-stagger data-ca-stagger-step="130">
          {columns.map((col, ci) => (
            <div key={ci} style={{
              background: "var(--paper)", border: "1px solid var(--border-1)",
              borderRadius: 22, padding: "30px 30px 28px",
            }}>
              <div style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 11.5, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--ink-navy)" }}>
                {col.tag}
              </div>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 500, lineHeight: 1.18, color: "var(--ink)", margin: "12px 0 18px" }}>
                {col.title}
              </h3>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.6, color: "var(--fg-2)", margin: "0 0 20px" }}>
                {col.lede}
              </p>
              {col.table ? (
                <div style={{ overflowX: "auto" }}>
                  <table style={{ width: "100%", borderCollapse: "collapse" }}>
                    <thead>
                      <tr>
                        {col.table.headers.map((h, i) => (
                          <th key={i} style={{
                            textAlign: "left", fontFamily: "var(--font-body)", fontWeight: 600,
                            fontSize: 11, letterSpacing: ".1em", textTransform: "uppercase",
                            color: "var(--fg-3)", padding: i === 0 ? "0 12px 10px 0" : "0 0 10px",
                            borderBottom: "1px solid var(--border-1)", whiteSpace: "nowrap",
                          }}>{h}</th>
                        ))}
                      </tr>
                    </thead>
                    <tbody>
                      {col.table.rows.map((row, ri) => (
                        <tr key={ri}>
                          <td style={{
                            verticalAlign: "top", fontFamily: "var(--font-body)", fontWeight: 600,
                            fontSize: 14, lineHeight: 1.4, color: "var(--ink-navy)",
                            padding: "12px 12px 12px 0", width: "36%",
                            borderBottom: ri < col.table.rows.length - 1 ? "1px solid var(--border-1)" : "none",
                          }}>{row[0]}</td>
                          <td style={{
                            verticalAlign: "top", fontFamily: "var(--font-body)", fontSize: 14,
                            lineHeight: 1.5, color: "var(--fg-2)", padding: "12px 0",
                            borderBottom: ri < col.table.rows.length - 1 ? "1px solid var(--border-1)" : "none",
                          }}>{row[1]}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              ) : (
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 11 }}>
                {col.bullets.map((b, i) => (
                  <li key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 12, alignItems: "start", fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.5, color: "var(--fg-2)" }}>
                    <span style={{ width: 22, height: 22, borderRadius: 999, background: "var(--coral-wash)", color: "var(--ink-navy)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginTop: 2, flexShrink: 0 }}><I.Check size={12}/></span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
              )}
            </div>
          ))}
        </div>
      </PageFrame>
    </section>
  );
}

// ---- PricingCards --------------------------------------------
function PricingCards({ eyebrow, title, cards }) {
  return (
    <section style={{ background: "var(--paper)", padding: "96px 0" }}>
      <PageFrame>
        <div style={{ maxWidth: 700, marginBottom: 40 }}>
          <Eyebrow>{eyebrow}</Eyebrow>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(36px, 4vw, 52px)", lineHeight: 1.08, color: "var(--ink)", margin: "16px 0 0" }}>{title}</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: `repeat(${cards.length}, 1fr)`, gap: 18 }} data-ca-stagger data-ca-stagger-step="110">
          {cards.map((c, i) => (
            <div key={i} style={{
              background: c.highlight ? "var(--ink-navy)" : "var(--paper-2)",
              color: c.highlight ? "var(--paper)" : "var(--ink)",
              border: c.highlight ? "none" : "1px solid var(--border-1)",
              borderRadius: 22, padding: "28px 28px 26px", display: "flex", flexDirection: "column", gap: 14,
            }}>
              <div style={{ fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase", fontWeight: 600, color: c.highlight ? "var(--coral-soft)" : "var(--ink-navy)" }}>
                {c.tag}
              </div>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 24, margin: 0 }}>{c.title}</h3>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 42, lineHeight: 1, margin: "4px 0 0" }}>
                {c.price}
                <span style={{ fontSize: 14, opacity: .6, marginLeft: 4 }}>{c.per}</span>
              </div>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 14.5, lineHeight: 1.55, color: c.highlight ? "rgba(253, 250, 243,.78)" : "var(--fg-2)", margin: 0 }}>{c.desc}</p>
              <ul style={{ listStyle: "none", padding: 0, margin: "8px 0 18px", display: "flex", flexDirection: "column", gap: 8 }}>
                {c.includes.map((line, j) => (
                  <li key={j} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 10, alignItems: "start", fontSize: 14, lineHeight: 1.45, color: c.highlight ? "rgba(253, 250, 243,.85)" : "var(--fg-2)" }}>
                    <span style={{ marginTop: 4, color: c.highlight ? "var(--coral)" : "var(--coral-deep)" }}><I.Check size={12}/></span>
                    {line}
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: "auto" }}>
                <Button kind={c.highlight ? "coral" : "ghost"} size="md" href="#contact">{c.cta}&nbsp;<I.Arrow/></Button>
              </div>
            </div>
          ))}
        </div>
      </PageFrame>
    </section>
  );
}

// ---- FAQ -----------------------------------------------------
function FAQ({ eyebrow, title, items }) {
  return (
    <section style={{ background: "var(--paper-2)", padding: "96px 0" }}>
      <PageFrame style={{ maxWidth: 900 }}>
        <div style={{ marginBottom: 40 }}>
          <Eyebrow>{eyebrow}</Eyebrow>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(36px, 4vw, 52px)", lineHeight: 1.08, color: "var(--ink)", margin: "18px 0 0" }}>{title}</h2>
        </div>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }} data-ca-stagger data-ca-stagger-step="80">
          {items.map((q, i) => (
            <li key={i} style={{ background: "var(--paper)", border: "1px solid var(--border-1)", borderRadius: 18, padding: "22px 28px" }}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 21, lineHeight: 1.3, color: "var(--ink)", marginBottom: 10 }}>{q.q}</div>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, lineHeight: 1.65, color: "var(--fg-2)", margin: 0 }}>{q.a}</p>
            </li>
          ))}
        </ul>
      </PageFrame>
    </section>
  );
}

// ---- EventCard / EventsList ----------------------------------
function EventCard({ ev }) {
  const isPast = ev.past;
  return (
    <article style={{
      background: "var(--paper)", border: "1px solid var(--border-1)",
      borderRadius: 20, padding: "26px 28px",
      display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 28, alignItems: "center",
      opacity: isPast ? .55 : 1,
    }}>
      <div style={{ textAlign: "center", padding: "10px 20px", borderRight: "1px dashed var(--border-1)" }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 32, lineHeight: 1, color: "var(--ink-navy)" }}>{ev.date}</div>
        <div style={{ fontSize: 11, letterSpacing: ".2em", color: "var(--fg-3)", marginTop: 6 }}>{ev.year}</div>
      </div>

      <div>
        <div style={{ display: "flex", gap: 10, marginBottom: 8, flexWrap: "wrap" }}>
          {ev.tags.map((tag, i) => (
            <span key={i} style={{
              fontSize: 10.5, letterSpacing: ".18em", textTransform: "uppercase", fontWeight: 600,
              padding: "4px 11px", borderRadius: 999,
              background: i === 0 ? "var(--coral-wash)" : "var(--paper-2)",
              color: "var(--ink-navy)", border: "1px solid var(--border-1)",
            }}>{tag}</span>
          ))}
        </div>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 22, lineHeight: 1.25, margin: "0 0 8px", color: "var(--ink)" }}>
          {ev.title}
        </h3>
        <p style={{ fontFamily: "var(--font-body)", fontSize: 14.5, lineHeight: 1.55, color: "var(--fg-2)", margin: 0, maxWidth: "62ch" }}>
          {ev.desc}
        </p>
        <div style={{ marginTop: 10, fontSize: 12.5, letterSpacing: ".05em", color: "var(--fg-3)" }}>
          {ev.where}
        </div>
      </div>

      <div>
        {isPast ? (
          <span style={{ fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--fg-3)" }}>Held</span>
        ) : (
          <Button kind={ev.featured ? "coral" : "ghost"} size="md" href="#contact">
            {ev.featured ? "Reserve a seat" : "Reserve"}&nbsp;<I.Arrow/>
          </Button>
        )}
      </div>
    </article>
  );
}

// ---- CTAStrip ------------------------------------------------
function CTAStrip({ assetBase = "" }) {
  const { t } = useLang();
  return (
    <section id="contact" style={{ background: "var(--paper)", padding: "80px 0 96px" }}>
      <PageFrame>
        <div style={{
          background: "var(--ink-navy)", color: "var(--paper)",
          borderRadius: 28, padding: "48px 56px", position: "relative", overflow: "hidden",
          display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 48, alignItems: "center",
        }}>
          <svg viewBox="0 0 800 200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: .1, pointerEvents: "none" }} preserveAspectRatio="none">
            <path d="M0 120 Q 200 80 400 120 T 800 120" stroke="var(--coral)" strokeWidth="2" fill="none"/>
            <path d="M0 160 Q 200 130 400 160 T 800 160" stroke="var(--paper)" strokeWidth="1.5" fill="none"/>
          </svg>
          <div style={{ position: "relative" }}>
            <Eyebrow color="var(--coral-soft)">{t("Have a chat", "聊聊")}</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(34px, 3.6vw, 48px)", lineHeight: 1.1, color: "var(--paper)", margin: "16px 0 14px", maxWidth: "20ch" }}>
              {t(<>The first 30 minutes are <em style={{ fontStyle: "italic", color: "var(--coral)", fontWeight: 400 }}>free</em>, and there's no script.</>,
                 <>前 30 分钟<em style={{ fontStyle: "italic", color: "var(--coral)", fontWeight: 400 }}>免费</em></>)}
            </h2>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.65, color: "rgba(253, 250, 243,.78)", margin: "0 0 24px", maxWidth: "46ch" }}>
              {t("WhatsApp is fastest. WeChat works too. Email if you'd rather take your time. Whatever feels easiest is the right one.",
                 "欢迎联系 WhatsApp, 微信, 邮件均可")}
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
              <Button kind="coral" size="lg" href="https://wa.me/447986935783">
                <I.WhatsApp/>&nbsp;{t("Open WhatsApp", "打开 WhatsApp")}
              </Button>
              <Button kind="inkGhost" size="lg" href="mailto:cambridgearkcoaching@gmail.com">
                {t("Send an email", "发送邮件")}
              </Button>
            </div>
          </div>
          <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <QrCard src={assetBase + "assets/qr-whatsapp.png"} label="WhatsApp" sublabel={t("Scan to chat", "扫码对话")}/>
            <QrCard src={assetBase + "assets/qr-wechat.png"} label="WeChat" sublabel="扫码加微信"/>
          </div>
        </div>
      </PageFrame>
    </section>
  );
}

Object.assign(window, { PageHero, PathwayList, PricingCards, FAQ, EventCard, CTAStrip });
