/* global React */

// ---------------------------------------------------------------
// landing-sections.jsx — all sections below the hero, in order:
//   1. IsThisYou — neurodivergent-adult signals
//   2. ServicesGrid — 6 service cards
//   3. HowSession — 5-step visual journey
//   4. Testimonials — adult voices + parent voices
//   5. SeminarsStrip — upcoming public events
//   6. BilingualBand — EN ↔ 中文 promise
//   7. ContactCTA — WhatsApp + WeChat QR + CTA
// ---------------------------------------------------------------

// ===== 1. IsThisYou =====
function IsThisYou({ assetBase = "" }) {
  const { t, ct } = useCT();
  const lines = [
    [ct("home.isThisYou.1.head", "You hide how hard things actually are.", "你把真正的挣扎藏起来。"),
     ct("home.isThisYou.1.body", "Fine on the outside — inside, you're spinning a hundred plates so no one notices.", "外表如常，内心却在平衡上百件事，只为不被看穿。")],
    [ct("home.isThisYou.2.head", "You start things you can't finish.", "你常开始却难以收尾。"),
     ct("home.isThisYou.2.body", "Not for lack of caring — the wiring between intention and action just gives way differently.", "并非不在意 — 只是从意图到行动的连接，断点与他人不同。")],
    [ct("home.isThisYou.3.head", "Therapy didn't quite fit.", "心理治疗似乎不太合身。"),
     ct("home.isThisYou.3.body", "You wanted strategies and momentum, not to re-explain your childhood.", "你想要策略与推力，而非再度复盘童年。")],
    [ct("home.isThisYou.4.head", "Your child is wired differently — and so are you.", "你的孩子与众不同 — 而你也是。"),
     ct("home.isThisYou.4.body", "Parenting a SEND child while running your own neurodivergent system. Coaching holds both.", "自己也是神经多样性，却在养育特殊需要的孩子 — 教练同时承托两者。")],
  ];
  return (
    <section style={{ background: "var(--paper-2)", padding: "96px 0" }}>
      <PageFrame>
        <div style={{ display: "grid", gridTemplateColumns: ".9fr 1.1fr", gap: 80, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 110 }}>
            <Eyebrow>{ct("home.isThisYou.eyebrow", "Is any of this you?", "你是否如此？")}</Eyebrow>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 500,
              fontSize: "clamp(40px, 4.4vw, 60px)", lineHeight: 1.06,
              letterSpacing: "-.01em", color: "var(--ink)",
              margin: "20px 0 24px", maxWidth: "16ch",
            }}>
              {t(<>As a coach, I can help my clients <em style={{ fontStyle: "italic", color: "var(--coral-deep)", fontWeight: 400 }}>understand themselves</em>, work with their brain rather than against it, and turn self-awareness into <em style={{ fontStyle: "italic", color: "var(--coral-deep)", fontWeight: 400 }}>practical action</em>.</>,
                 <>作为教练，我能帮助我的客户<em style={{ fontStyle: "italic", color: "var(--coral-deep)", fontWeight: 400 }}>认识自己</em>，顺应而非对抗自己大脑的运作方式，并将自我觉察转化为<em style={{ fontStyle: "italic", color: "var(--coral-deep)", fontWeight: 400 }}>切实可行的行动</em>。</>)}
            </h2>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 17, lineHeight: 1.65, color: "var(--fg-2)", maxWidth: "42ch" }}>
              {ct("home.isThisYou.lede",
                "This isn't therapy or advice. It's a structured, psychologically safe conversation that helps you build a life that fits your actual brain.",
                "这不是心理治疗，也不是建议，而是一场安全、有结构的对话 — 帮你建立真正契合大脑的生活。"
              )}
            </p>
          </div>

          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }} data-ca-stagger data-ca-stagger-step="110">
            {lines.map(([head, body], i) => (
              <li key={i} style={{
                background: "var(--paper)", border: "1px solid var(--border-1)",
                borderRadius: 18, padding: "24px 28px",
                display: "grid", gridTemplateColumns: "auto 1fr", gap: 18, alignItems: "start",
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 999, background: "var(--coral-wash)",
                  color: "var(--ink-navy)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
                  fontFamily: "var(--font-display)", fontSize: 16, fontStyle: "italic",
                }}>{String(i + 1).padStart(2, "0")}</div>
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.3, color: "var(--ink)", marginBottom: 6 }}>{head}</div>
                  <div style={{ fontFamily: "var(--font-body)", fontSize: 15.5, lineHeight: 1.6, color: "var(--fg-2)" }}>{body}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </PageFrame>
    </section>
  );
}

// ===== 2. ServicesGrid =====
function ServicesGrid({ assetBase = "" }) {
  const { t, ct } = useCT();
  const items = [
    { icon: <I.Spark/>, eyebrow: ct("home.services.1.eyebrow", "1:1 · Adults", "一对一 · 成人"),
      title: ct("home.services.1.title", "ADHD-specific coaching", "ADHD 专属教练"),
      desc: ct("home.services.1.desc", "Executive function, energy regulation, and a daily rhythm that survives Wednesday.", "执行功能、能量管理，与能撑过周三的日常节奏。"),
      href: "pages/Coaching.html#adhd", tone: "navy" },
    { icon: <I.Compass/>, eyebrow: ct("home.services.2.eyebrow", "1:1 · Adults", "一对一 · 成人"),
      title: ct("home.services.2.title", "Autistic adult coaching", "自闭症成人教练"),
      desc: ct("home.services.2.desc", "Self-knowledge, sensory needs, communication choices — never any masking.", "自我认知、感官适配、沟通选择 — 全程无需「伪装」。"),
      href: "pages/Coaching.html#autism", tone: "paper" },
    { icon: <I.Heart/>, eyebrow: ct("home.services.3.eyebrow", "1:1 · Parents & families", "一对一 · 家长与家庭"),
      title: ct("home.services.3.title", "Coaching for SEND parents", "特殊教育家长教练"),
      desc: ct("home.services.3.desc", "Advocating, scheduling, and being a whole person — we work on all three.", "倡导、安排、做完整的自己 — 三者同时承托。"),
      href: "pages/Coaching.html#parents", tone: "coral" },
    { icon: <I.Users/>, eyebrow: ct("home.services.4.eyebrow", "Cohort", "群组"),
      title: ct("home.services.4.title", "Group programmes", "小组项目"),
      desc: ct("home.services.4.desc", "Six-week cohorts of neurodivergent adults, side by side. You're not the only one.", "六周一期的神经多样性成人小组 — 你不是唯一。"),
      href: "pages/Group Programmes.html", tone: "paper" },
    { icon: <I.Globe/>, eyebrow: ct("home.services.6.eyebrow", "Bilingual", "双语"),
      title: ct("home.services.6.title", "English & 中文", "中英双语教练"),
      desc: ct("home.services.6.desc", "Coaching in the language your inner voice uses. Switch mid-session anytime.", "用你内心真正使用的语言进行教练对话 — 中途切换也欢迎。"),
      href: "#bilingual", tone: "paper" },
  ];

  return (
    <section id="services" style={{ background: "var(--paper)", padding: "104px 0" }}>
      <PageFrame>
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <Eyebrow>{ct("home.services.eyebrow", "What I offer", "服务内容")}</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 500,
            fontSize: "clamp(40px, 4.4vw, 60px)", lineHeight: 1.06,
            letterSpacing: "-.01em", color: "var(--ink)",
            margin: "20px 0 18px",
          }}>
            {t(<>Five doors. <em style={{ fontStyle: "italic", color: "var(--coral-deep)", fontWeight: 400 }}>One conversation</em> to find yours.</>,
               <>五扇门。<em style={{ fontStyle: "italic", color: "var(--coral-deep)", fontWeight: 400 }}>一次对话</em>，找到你的那一扇。</>)}
          </h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 18, lineHeight: 1.6, color: "var(--fg-2)", margin: 0, maxWidth: "60ch" }}>
            {ct("home.services.lede", "Every engagement starts with a free 30-minute chat. We meet, see if it fits, then decide what's next.",
               "每段合作都从一次免费的 30 分钟对话开始 — 先了解、确认契合，再决定下一步。")}
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }} data-ca-stagger data-ca-stagger-step="90">
          {items.map((s, i) => <ServiceCard key={i} {...s}/>)}
        </div>
      </PageFrame>
    </section>
  );
}

function ServiceCard({ icon, eyebrow, title, desc, href, tone = "paper" }) {
  const isNavy = tone === "navy";
  const isCoral = tone === "coral";
  const bg = isNavy ? "var(--ink-navy)" : isCoral ? "linear-gradient(180deg, #fbe7df 0%, #f6cabc 100%)" : "var(--paper-2)";
  const fg = isNavy ? "var(--paper)" : "var(--ink)";
  const muted = isNavy ? "rgba(253, 250, 243,.78)" : isCoral ? "rgba(11,53,80,.78)" : "var(--fg-2)";
  const eyebrowColor = isNavy ? "var(--coral-soft)" : "var(--ink-navy)";
  return (
    <a href={href} style={{
      display: "flex", flexDirection: "column", gap: 16,
      background: bg, color: fg, textDecoration: "none",
      borderRadius: 22, padding: "30px 28px 26px",
      border: isCoral || isNavy ? "none" : "1px solid var(--border-1)",
      minHeight: 280, position: "relative",
      transition: "transform .2s, box-shadow .25s",
    }}>
      <div style={{
        width: 44, height: 44, borderRadius: 999,
        background: isNavy ? "rgba(253, 250, 243,.14)" : isCoral ? "rgba(11,53,80,.1)" : "var(--coral-wash)",
        color: isNavy ? "var(--coral-soft)" : "var(--ink-navy)",
        display: "flex", alignItems: "center", justifyContent: "center",
      }}>{icon}</div>
      <div style={{ fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase", color: eyebrowColor, fontWeight: 600 }}>{eyebrow}</div>
      <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 26, lineHeight: 1.18, margin: 0, color: fg }}>{title}</h3>
      <p style={{ fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.6, color: muted, margin: "0 0 4px" }}>{desc}</p>
      <div style={{ marginTop: "auto", fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 13, letterSpacing: ".08em", display: "inline-flex", alignItems: "center", gap: 8, color: isNavy ? "var(--coral-soft)" : "var(--ink-navy)" }}>
        Read more <I.Arrow/>
      </div>
    </a>
  );
}

// ===== 3. HowSession =====
function HowSession() {
  const { t, ct } = useCT();
  const steps = [
    { k: "01", title: ct("home.how.1.title", "A free 30-minute chat", "30 分钟免费对话"),
      body: ct("home.how.1.body", "No agenda. You see if my voice and pace feel safe; I learn what you want to change.", "无议程。你感受我的节奏是否安全，我了解你想改变什么。") },
    { k: "02", title: ct("home.how.2.title", "We agree the shape", "约定形式"),
      body: ct("home.how.2.body", "Sessions, cadence, language, in person or online — nothing locked in until you're ready.", "次数、频率、语言、线上线下 — 在你确认前一切都不锁定。") },
    { k: "03", title: ct("home.how.3.title", "We coach", "正式教练"),
      body: ct("home.how.3.body", "60–90 minutes. I ask, you think aloud, we surface what's hiding. You leave with one next step — not ten.", "60–90 分钟。我提问，你出声思考，让隐藏的浮现。每次只带走一个下一步 — 不是十个。") },
    { k: "04", title: ct("home.how.4.title", "Between sessions, you live", "教练间隙，回归生活"),
      body: ct("home.how.4.body", "You try the thing, notice what happens, and text me if you need to — most don't.", "去做那件事，观察发生了什么。需要时随时联系 — 多数时候你不需要。") },
    { k: "05", title: ct("home.how.5.title", "We close, on purpose", "有意识地结束"),
      body: ct("home.how.5.body", "Coaching is meant to end. We name what changed, what you'll carry, and let go cleanly.", "教练本就是要结束的。我们命名改变、命名你将带走的，干净告别。") },
  ];

  return (
    <section id="how" style={{ background: "var(--ink-navy)", color: "var(--paper)", padding: "104px 0", position: "relative", overflow: "hidden" }}>
      {/* subtle wave decoration */}
      <svg viewBox="0 0 1440 200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: .08, pointerEvents: "none" }} preserveAspectRatio="none">
        <path d="M0 100 Q 240 60 480 100 T 960 100 T 1440 100" stroke="var(--coral)" strokeWidth="2" fill="none"/>
        <path d="M0 140 Q 240 100 480 140 T 960 140 T 1440 140" stroke="var(--paper)" strokeWidth="1.5" fill="none"/>
      </svg>
      <PageFrame style={{ position: "relative" }}>
        <div style={{ maxWidth: 680, marginBottom: 56 }}>
          <Eyebrow color="var(--coral-soft)">{ct("home.how.eyebrow", "How a session works", "教练流程")}</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 500,
            fontSize: "clamp(40px, 4.4vw, 60px)", lineHeight: 1.06,
            letterSpacing: "-.01em", color: "var(--paper)",
            margin: "20px 0 18px",
          }}>
            {t(<>From a first hello to a clean <em style={{ fontStyle: "italic", color: "var(--coral)", fontWeight: 400 }}>goodbye</em>.</>,
               <>从第一次问候，到一次<em style={{ fontStyle: "italic", color: "var(--coral)", fontWeight: 400 }}>干净的告别</em>。</>)}
          </h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 18, lineHeight: 1.6, color: "rgba(253, 250, 243,.78)", margin: 0, maxWidth: "56ch" }}>
            {ct("home.how.lede", "Predictability is a kindness for neurodivergent brains. Here's what working together looks like.",
               "对神经多样性的大脑，可预测就是一种善意。以下是合作的全貌。")}
          </p>
        </div>

        <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 4, position: "relative" }} data-ca-stagger data-ca-stagger-step="140" data-ca-stagger-start="100">
          {/* connector line */}
          <div style={{ position: "absolute", top: 36, left: "10%", right: "10%", height: 1, borderTop: "1px dashed rgba(253, 250, 243,.25)" }}/>
          {steps.map((s, i) => (
            <li key={s.k} style={{ position: "relative", padding: "0 12px" }}>
              <div style={{
                width: 72, height: 72, borderRadius: 999,
                background: i === 0 ? "var(--coral)" : "var(--ink-navy)",
                color: i === 0 ? "var(--ink)" : "var(--paper)",
                border: i === 0 ? "none" : "1.5px solid rgba(253, 250, 243,.35)",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 22, fontStyle: "italic",
                margin: "0 auto 22px", position: "relative", zIndex: 1,
              }}>{s.k}</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 19, lineHeight: 1.25, color: "var(--paper)", textAlign: "center", marginBottom: 10 }}>{s.title}</div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 13.5, lineHeight: 1.6, color: "rgba(253, 250, 243,.72)", textAlign: "center" }}>{s.body}</div>
            </li>
          ))}
        </ol>
      </PageFrame>
    </section>
  );
}

// Emphasis inside the pull-quotes. The quotes set in italic Lora, which
// the homepage loads up to weight 600 — without that, a plain <strong>
// would render as a browser-synthesised fake bold and look muddy at
// this size. English only: the Chinese quotes stay unstyled by request.
function QuoteEm({ children }) {
  return <strong style={{ fontWeight: 600 }}>{children}</strong>;
}

// ===== 4. Testimonials =====
function Testimonials() {
  const { t } = useLang();
  const voices = [
    { quote: t(<>“I’ve completed ten online sessions with Coach Yu over the past three months, and the experience has been <QuoteEm>transformative</QuoteEm>. I’ve learned to embrace myself more proactively, which has significantly reduced my internal mental friction.”</>,
                "“过去三个月，我和于教练完成了十次线上教练会谈，这段经历可以说是脱胎换骨。我学会了更主动地接纳自己，内心的精神内耗也因此大大减少。”"),
      name: t("Zheng — coaching client, Sweden", "Zheng — 教练客户 · 瑞典"), tone: "paper" },
    { quote: t(<>“Instead of pushing me to just be more disciplined, my coach helped me <QuoteEm>unpack</QuoteEm> the emotions, pressure, and thinking patterns behind my struggles. Now I don’t stay trapped in those emotions for as long — I’m more willing to just begin.”</>,
                "“教练没有一味要求我更自律，而是帮我看清困扰背后的情绪、压力与思维模式。现在我不会再长时间困在那些情绪里 — 我更愿意先开始去做。”"),
      name: t("Viktor — ADHD coaching client, Shanghai", "Viktor — ADHD 教练客户 · 上海"), tone: "coral" },
    { quote: t(<>“Coach Tao Yu is a very <QuoteEm>warm and compassionate</QuoteEm> coach with extensive experience in supporting neurodivergent children. She provides practical, specific recommendations, including helpful books, websites, and strategies that parents can actually use. I have gained so much from her support and guidance. I would highly recommend working with her—she can be a reliable and reassuring source of support, giving you confidence and peace of mind along the way.”</>,
                "“Coach Tao Yu 是一位非常温暖、富有同理心的教练，在支持神经多样性儿童方面拥有丰富经验。她提供实用且具体的建议，包括对家长真正有帮助的书籍、网站和方法。我从她的支持与指导中获益良多。我强烈推荐与她合作——她是一位可靠且令人安心的支持者，能在整个过程中带给你信心与安定。”"),
      name: t("Vanessa — ADHD parent, Canada", "Vanessa — ADHD 家长 · 加拿大"), tone: "paper" },
    { quote: t(<>“The most important thing for me was that coach Tao was able to recognise my <QuoteEm>strengths and unique qualities</QuoteEm>, and repeatedly guide, encourage, and affirm me throughout the process. At no point did I feel judged or scrutinised. The overall experience was very <QuoteEm>positive</QuoteEm> and, in many ways, felt like talking to a caring and supportive friend.<br/><br/>Looking back at the timeline of our conversations, I would describe the journey in three stages: letting go of the past; addressing my current challenges and rebuilding my confidence; and looking towards the future while gaining a deeper understanding of myself.<br/><br/>I believe the whole process requires a coach to have a deep understanding of people at different stages of life, as well as strong professional coaching skills. In every conversation, I was able to work through real problems and emotional blocks. With my coach’s support, I was genuinely able to come out of one of the lowest points in my life and gain a much deeper understanding of myself from different perspectives.<br/><br/>Most importantly, I built a solid foundation of self-confidence that I can continue to rely on moving forward.<br/><br/>Overall, I would say my coach has been more than just a coach — she has truly been one of those rare people who comes into your life at the right time and makes a lasting difference. I would consider her a <QuoteEm>life-changing</QuoteEm> mentor and a true benefactor in my life.”</>,
                <>“对我来说最重要的是，Tao 教练能够看见我的长处与独特之处，并在整个过程中不断引导、鼓励、肯定我。我从未感到被评判或审视。整体体验非常正向，很多时候，就像在和一位关心、支持我的朋友说话。<br/><br/>回顾我们对话的历程，我会把这段旅程分为三个阶段：放下过去；面对当下的挑战、重建自信；以及展望未来，同时更深入地认识自己。<br/><br/>我认为整个过程需要教练对处于不同人生阶段的人有深刻的理解，也需要扎实的专业教练能力。每一次对话，我都能真正处理现实中的问题与情绪障碍。在教练的支持下，我真的从人生最低谷之一走了出来，并从不同角度更深入地认识了自己。<br/><br/>最重要的是，我建立起一份扎实的自信基础，往后也能继续依靠它。<br/><br/>总的来说，我会说我的教练不只是一位教练 —— 她真的是那种在对的时间走进你生命、并带来长远改变的人。对我而言，她是改变我人生的导师，也是我生命中真正的贵人。”</>),
      name: t("Ingrid, Hong Kong", "Ingrid，香港"), tone: "navy", long: true },
    { quote: t(<>“It’s been a long time since our last online session with Coach Tao. Today, we finally met in person in Cambridge.<br/><br/>Our conversation today made me feel that I was being <QuoteEm>taken seriously, understood, and seen</QuoteEm>. Genuine communication has brought me many unexpected surprises, allowing me to become aware of my own limitations — both emotionally, and in how I think about my future career.<br/><br/>Communicating with Coach Tao involves more than just healing wounds and addressing emotions; it’s about striving to improve the present; it’s about having conversations with a longer-term perspective, greater depth, and a sense of energy, motivation, and action.<br/><br/>Thanks to Coach Tao’s conversations, I have gained a deeper understanding of myself and feel more confident.”</>,
                <>“距离上一次和 Tao 教练的线上会谈，已经过去很久了。今天，我们终于在剑桥见了面。<br/><br/>今天的对话让我感到自己被认真对待、被理解、被看见。真诚的沟通带给我许多意想不到的收获，让我意识到自己的局限 —— 无论是在情绪上，还是在对未来职业发展的思考上。<br/><br/>和 Tao 教练的交流，不只是疗愈伤口、处理情绪；它关乎如何让当下变得更好；它是一种更长远、更有深度，并且带着能量、动力与行动力的对话。<br/><br/>因为与 Tao 教练的这些对话，我更了解自己，也更有信心了。”</>),
      name: t("Roy, University College London", "Roy，伦敦大学学院"), tone: "coral", long: true },
    { quote: t(<>“I truly want to express my deepest gratitude to you. You are like warm sunshine, lighting up my path when I needed it most.<br/><br/>Thank you especially for the coaching you gave me. It has helped me more than I can put into words. The beautiful metaphor you used during our coaching session — the image of <QuoteEm>vines growing and blossoming into a garden</QuoteEm> — is still vivid in my mind today. At a time when I felt lost and had underestimated myself, that image gave me the motivation and courage to pursue my dreams.<br/><br/>Every time I talk with you, I am deeply inspired by your energy. It feels as though I am being recharged, giving me the strength to keep moving forward.<br/><br/>Thank you, truly, from the bottom of my heart. Your talent and passion shine brightly, like light and sunshine. Thank you for dedicating yourself to such meaningful work, and for bringing light into the lives of so many people.”</>,
                <>“我真的想向你表达最深的感谢。你就像温暖的阳光，在我最需要的时候照亮了我的路。<br/><br/>特别感谢你给我的教练陪伴。它对我的帮助，远远超过我能用言语表达的。你在那次教练会谈中用的那个美丽的比喻 —— 藤蔓生长，最终开成一座花园 —— 直到今天仍清晰地留在我心里。在我迷失方向、低估自己的时候，那个画面给了我追寻梦想的动力与勇气。<br/><br/>每一次和你交谈，我都被你的能量深深鼓舞。那感觉就像重新充电，让我有力气继续往前走。<br/><br/>真心地，从心底感谢你。你的才华与热情闪闪发光，如同光与阳光。谢谢你投身于这样有意义的工作，也谢谢你为那么多人的生命带来光。”</>),
      name: t("Zoe, University of Warwick", "Zoe，华威大学"), tone: "paper", long: true },
    { quote: t(<>“<QuoteEm>Positive</QuoteEm> · Understanding · Action-oriented, highly recommended”</>,
                "“积极 · 善解人意 · 行动导向，强烈推荐”"),
      name: t("Emily, Canada", "Emily，加拿大"), tone: "coral" },
    { quote: t(<>“With a sense of joyful anticipation, I had a coaching session with Tao. After a relaxed and warm opening, we naturally moved into the topic I wanted to explore. A few rounds of thought-provoking questions opened up many new perspectives for me.<br/><br/>The classic coaching question, “Imagine becoming the person you want to be—how would you feel?” seemed to have a kind of <QuoteEm>magic</QuoteEm> to it. In an instant, I felt a strong sense of <QuoteEm>joy and delight</QuoteEm> arise within me.<br/><br/>We also explored what it might feel like when facing obstacles. I could actually sense tension in my chest, but when putting it into words, I described it as “feeling lost and uncertain.” In that moment, I suddenly realised that my awareness of my body and physical sensations had been lagging behind. Perhaps years of living at such a fast pace have made me less able to pause and truly listen to my inner feelings.<br/><br/>Tao also raised several very valuable questions. Some encouraged me to broaden my perspective and do further research; others helped me anticipate potential challenges and prepare for them in advance.<br/><br/>Overall, the conversation gave me a higher-level perspective from which to reflect on the new areas I am longing to explore. I truly felt empowered by the experience.”</>,
                <>“带着欣喜的期待我和 Tao 做了一场教练。<br/><br/>轻松暖场后，自然切入我想探索的话题，几轮让我思考的启发式提问打开了许多新的视角。经典提问“想象成为想要样子时你会有什么感受”仿佛真的有魔力，瞬间一股愉悦感涌来。也想象了阻碍时的感受，其实感觉到胸口的紧张，但语言表达时却想到了“迷茫”，此刻突然发现自己对身体的觉察滞后了，也许就是多年快节奏生活导致倾听内心感受的能力不足。<br/><br/>涛还抛出几个很有价值的问题，有的让我打开视野需要调研，有的起到打预防性的效果，总之，一番对话帮助我有了更高一层的视角去梳理和思考内心渴望开启的新领域，真的有被赋能了。”</>),
      name: t("Cathy, Beijing", "Cathy，北京"), tone: "navy", long: true },
    { quote: t(<>“I am very grateful to Coach Tao for the parent–child coaching session she had with my child and me yesterday.<br/><br/>This was my second coaching experience with Tao. Two weeks ago, I had a one-to-one session with her. At that time, I felt very anxious about how to communicate with my teenager, who was becoming increasingly sensitive and independent. Tao <QuoteEm>listened patiently</QuoteEm> and guided me through <QuoteEm>thoughtful</QuoteEm> questions, helping me realise that <QuoteEm>building trust</QuoteEm> and connection with my child needed to come first.<br/><br/>She also introduced practical techniques such as empathetic listening and multiple-choice communication, and helped me understand the needs behind my child’s behaviour. Gradually, our arguments have become less frequent, and my child is more willing to share their thoughts and feelings with me. We are also becoming better at discussing problems and finding solutions together.<br/><br/>Tao has also supported my child with study, time management, attention and sleep, while helping me find a more positive and effective way to communicate as a parent.<br/><br/>Her professionalism, warmth and genuine care have brought meaningful changes to our family.<br/><br/>Thank you, Coach Tao, for your guidance and support. I highly recommend her parent–child coaching.”</>,
                <>“非常感激昨天于教练给我和孩子做的一场亲子教练。这是我第二次与于老师做亲子教练了，第一次是两周前于教练和我的个人的教练。由于青春期的孩子叛逆敏感，我因不知如何与孩子沟通焦虑不已，是于教练耐心深度聆听，然后用提问来引导我，让我看到我首先要与孩子建立信任关心，改变沟通方式。于教练也分享了非常实用的方法，一次次帮我分析孩子的行为背后的真正需求。<br/><br/>于教练教的“共情倾听”“选择题沟通”等技巧，让我和孩子的关系逐渐缓和——从前的争吵变少了，孩子愿意主动跟我分享心事，遇到问题也会一起商量。于教练不仅在学业和时间管理上指引孩子，让我的孩子找到最适合自己的方式提升注意力和保证足够睡眠；更在亲子沟通上为我点亮了方向，这份专业与热忱让我们一家都感到很温暖。<br/><br/>衷心感谢于教练的悉心指导与帮助，非常推荐！”</>),
      name: t("Angela — ADHD parent, China", "Angela — ADHD 家长 · 中国"), tone: "paper", long: true },
  ];

  return (
    <section style={{ background: "var(--paper-2)", padding: "104px 0" }}>
      <PageFrame>
        <div style={{ textAlign: "center", maxWidth: 760, margin: "0 auto 64px" }}>
          <Eyebrow>{t("Voices from the practice", "教练见证")}</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 500,
            fontSize: "clamp(40px, 4.4vw, 56px)", lineHeight: 1.08,
            letterSpacing: "-.01em", color: "var(--ink)",
            margin: "20px 0 0",
          }}>
            {t(<>What changed for the people who <em style={{ fontStyle: "italic", color: "var(--coral-deep)", fontWeight: 400 }}>walked through this door</em>.</>,
               <>那些<em style={{ fontStyle: "italic", color: "var(--coral-deep)", fontWeight: 400 }}>走进这扇门</em>的人，发生了什么变化。</>)}
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: 22 }} data-ca-stagger data-ca-stagger-step="120">
          {voices.map((v, i) => <VoiceCard key={i} {...v} index={i}/>)}
        </div>
      </PageFrame>
    </section>
  );
}
function VoiceCard({ quote, name, tone, long, index }) {
  const { t } = useLang();
  // Long testimonials would otherwise produce tiles several times the height
  // of the short ones. Rather than clamping everything, measure each quote at
  // its natural height first (needsClamp === null renders unclamped) and only
  // collapse the ones where it saves more than a couple of lines — otherwise a
  // "Read more" appears that reveals almost nothing. Re-measured on language
  // change, since Chinese sets much shorter, and on resize.
  const [open, setOpen] = React.useState(false);
  const [needsClamp, setNeedsClamp] = React.useState(null);
  const quoteRef = React.useRef(null);
  const clampLines = long ? 13 : 11;

  React.useLayoutEffect(() => {
    const el = quoteRef.current;
    if (!el || needsClamp !== null) return;   // only on the unclamped pass
    const lh = parseFloat(getComputedStyle(el).lineHeight) || 24;
    setNeedsClamp(Math.round(el.scrollHeight / lh) > clampLines + 2);
  });
  React.useEffect(() => { setNeedsClamp(null); }, [name]);
  React.useEffect(() => {
    const onResize = () => setNeedsClamp(null);
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  const collapsed = needsClamp === true && !open;

  const isNavy = tone === "navy";
  const isCoral = tone === "coral";
  const bg = isNavy ? "var(--ink-navy)" : isCoral ? "linear-gradient(180deg, #fbe7df 0%, #f6cabc 100%)" : "var(--paper)";
  const fg = isNavy ? "var(--paper)" : "var(--ink)";
  const muted = isNavy ? "rgba(253, 250, 243,.7)" : isCoral ? "rgba(11,53,80,.7)" : "var(--fg-3)";
  const accent = isNavy ? "var(--coral)" : "var(--coral-deep)";
  return (
    <figure style={{
      margin: 0, padding: "40px 40px 36px",
      background: bg, color: fg, borderRadius: 22,
      border: isNavy || isCoral ? "none" : "1px solid var(--border-1)",
      position: "relative",
    }}>
      <div style={{ position: "absolute", top: 24, left: 32, color: accent, opacity: .8 }}>
        <I.Quote size={40}/>
      </div>
      <blockquote ref={quoteRef} style={{
        ...(collapsed ? {
          display: "-webkit-box", WebkitLineClamp: clampLines,
          WebkitBoxOrient: "vertical", overflow: "hidden",
        } : {}),
        ...(long ? {
        margin: "40px 0 14px", padding: 0,
        fontFamily: "var(--font-display)", fontStyle: "italic",
        fontWeight: 400, fontSize: 15.5, lineHeight: 1.7,
        color: fg, textWrap: "pretty",
      } : {
        margin: "40px 0 22px", padding: 0,
        fontFamily: "var(--font-display)", fontStyle: "italic",
        fontWeight: 400, fontSize: 24, lineHeight: 1.4,
        color: fg, textWrap: "pretty",
      }),
      }}>
        {quote}
      </blockquote>

      {needsClamp === true && (
        <button
          type="button"
          onClick={() => setOpen(o => !o)}
          aria-expanded={open}
          style={{
            appearance: "none", background: "none", border: "none", padding: 0,
            margin: "0 0 18px", cursor: "pointer",
            fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 13,
            letterSpacing: ".08em", color: accent,
            display: "inline-flex", alignItems: "center", gap: 8,
          }}
        >
          {open ? t("Read less", "收起") : t("Read more", "阅读全文")}
          <span style={{ display: "inline-flex", transform: open ? "rotate(-90deg)" : "rotate(90deg)", transition: "transform .2s" }}>
            <I.Arrow/>
          </span>
        </button>
      )}
      <figcaption style={{ fontFamily: "var(--font-body)", fontSize: 12, letterSpacing: ".18em", textTransform: "uppercase", fontWeight: 600, color: muted }}>
        — {name}
      </figcaption>
    </figure>
  );
}

// ===== 5. SeminarsStrip =====
function SeminarsStrip() {
  const { t, ct } = useCT();
  // Real seminars are added by the admin. Until then, show a "coming soon" state.
  const events = [];
  return (
    <section id="seminars" style={{ background: "var(--paper)", padding: "96px 0" }}>
      <PageFrame>
        <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", flexWrap: "wrap", gap: 24, marginBottom: 40 }}>
          <div style={{ maxWidth: 600 }}>
            <Eyebrow>{ct("home.seminars.eyebrow", "Upcoming seminars", "近期讲座")}</Eyebrow>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 500,
              fontSize: "clamp(36px, 4vw, 52px)", lineHeight: 1.08,
              color: "var(--ink)", margin: "16px 0 0",
            }}>
              {t(<>Come learn out loud, <em style={{ fontStyle: "italic", color: "var(--coral-deep)", fontWeight: 400 }}>together</em>.</>,
                 <>一起，<em style={{ fontStyle: "italic", color: "var(--coral-deep)", fontWeight: 400 }}>出声学习</em>。</>)}
            </h2>
          </div>
          {events.length > 0 &&
            <Button kind="ghost" href="pages/Seminars.html">{ct("home.seminars.allLink", "All seminars", "全部讲座")}&nbsp;<I.Arrow/></Button>}
        </div>

        {events.length === 0 ? (
          <div style={{
            border: "1px dashed var(--border-1)", borderRadius: 18,
            background: "var(--paper-2)", padding: "56px 32px", textAlign: "center",
          }}>
            <div style={{
              fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase",
              fontWeight: 600, color: "var(--coral-deep)",
            }}>{ct("home.seminars.comingSoonTag", "Coming soon", "敬请期待")}</div>
            <h3 style={{
              fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 24,
              lineHeight: 1.3, color: "var(--ink)", margin: "12px auto 8px", maxWidth: "26ch",
            }}>
              {ct("home.seminars.comingSoonTitle", "New seminars and workshops are being planned.", "新的讲座与工作坊正在筹备中。")}
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--fg-3)", margin: "0 auto", maxWidth: "44ch" }}>
              {ct("home.seminars.comingSoonBody", "Dates will appear here as soon as they're scheduled. In the meantime, get in touch to register your interest.",
                 "活动日期一经确定即会在此公布。在此期间，欢迎与我们联系，登记您的兴趣。")}
            </p>
            <div style={{ marginTop: 24 }}>
              <Button kind="ghost" href="#contact">{ct("home.seminars.registerInterest", "Register interest", "登记兴趣")}&nbsp;<I.Arrow/></Button>
            </div>
          </div>
        ) : (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }} data-ca-stagger data-ca-stagger-step="110">
          {events.map((e, i) => (
            <a key={i} href="pages/Seminars.html" style={{
              textDecoration: "none", background: "var(--paper-2)",
              border: "1px solid var(--border-1)", borderRadius: 18,
              padding: "26px 26px 24px", color: "var(--ink)",
              display: "flex", flexDirection: "column", gap: 14,
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start" }}>
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 30, lineHeight: 1, color: "var(--ink-navy)" }}>{e.date}</div>
                  <div style={{ fontSize: 11, letterSpacing: ".18em", color: "var(--fg-3)", marginTop: 4 }}>{e.year}</div>
                </div>
                <div style={{
                  fontSize: 10.5, letterSpacing: ".18em", textTransform: "uppercase",
                  padding: "5px 11px", borderRadius: 999,
                  background: "var(--coral-wash)", color: "var(--ink-navy)", fontWeight: 600,
                }}>{e.tag}</div>
              </div>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 21, lineHeight: 1.25, margin: 0, color: "var(--ink)" }}>
                {e.title}
              </h3>
              <div style={{ marginTop: "auto", paddingTop: 16, borderTop: "1px dashed var(--border-1)",
                            fontSize: 13, color: "var(--fg-3)", letterSpacing: ".04em" }}>
                {e.where}
              </div>
            </a>
          ))}
        </div>
        )}
      </PageFrame>
    </section>
  );
}

// ===== 6. BilingualBand =====
function BilingualBand({ assetBase = "" }) {
  const { raw } = useCT();
  return (
    <section id="bilingual" style={{ background: "var(--paper-2)", padding: "104px 0" }}>
      <PageFrame>
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0,
          borderRadius: 24, overflow: "hidden", border: "1px solid var(--border-1)",
        }}>
          <div style={{ padding: "56px 48px", background: "var(--paper)" }}>
            <div style={{ fontSize: 11, letterSpacing: ".22em", color: "var(--ink-navy)", fontWeight: 600, textTransform: "uppercase" }}>EN</div>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontStyle: "italic",
                          fontSize: "clamp(28px, 3vw, 40px)", lineHeight: 1.25, color: "var(--ink)", margin: "16px 0 18px", maxWidth: "22ch" }}>
              {raw("home.bilingual.en.heading", "Coaching held in the language your inner voice actually uses.")}
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--fg-2)", margin: 0, maxWidth: "40ch" }}>
              {raw("home.bilingual.en.body", "Some things only land in one language. Switch mid-session anytime — fully in English, fully in Chinese, or fluidly between the two.")}
            </p>
          </div>
          <div style={{ padding: "56px 48px", background: "var(--ink-navy)", color: "var(--paper)" }}>
            <div style={{ fontSize: 11, letterSpacing: ".22em", color: "var(--coral-soft)", fontWeight: 600, textTransform: "uppercase" }}>中文</div>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontStyle: "italic",
                          fontSize: "clamp(28px, 3vw, 40px)", lineHeight: 1.3, color: "var(--paper)", margin: "16px 0 18px", maxWidth: "22ch" }}>
              {raw("home.bilingual.zh.heading", "用你内心真正使用的语言，进行教练对话。")}
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "rgba(253, 250, 243,.78)", margin: 0, maxWidth: "30ch" }}>
              {raw("home.bilingual.zh.body", "有些话只能在一种语言里落地。教练可全程中文、全程英语，或自由切换 — 无需「翻译」自己。")}
            </p>
          </div>
        </div>
      </PageFrame>
    </section>
  );
}

// ===== 7. ContactCTA =====
// Someone who enquires once often comes back — remember how to reach them
// so they don't retype it. Deliberately NOT the message: people write to
// Tao about their child's diagnosis or their own mental health, often on a
// shared family computer, and a half-written message left sitting in the
// browser is a real privacy problem rather than a hypothetical one.
const CONTACT_DETAILS_KEY = "ca_contact";

function loadContactDetails() {
  if (!ConsentStore.allowsOptional) return null;
  try {
    const saved = JSON.parse(localStorage.getItem(CONTACT_DETAILS_KEY) || "null");
    if (!saved) return null;
    return { name: saved.name || "", email: saved.email || "", phone: saved.phone || "" };
  } catch (e) { return null; }
}

function ContactForm({ lang }) {
  const { t, ct } = useCT();
  const [fields, setFields] = React.useState(() => ({
    name: "", email: "", phone: "", message: "", ...(loadContactDetails() || {}),
  }));
  const [prefilled, setPrefilled] = React.useState(() => !!loadContactDetails());
  const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error

  function set(k) { return (e) => setFields((f) => ({ ...f, [k]: e.target.value })); }

  function forgetDetails() {
    try { localStorage.removeItem(CONTACT_DETAILS_KEY); } catch (e) {}
    setFields((f) => ({ ...f, name: "", email: "", phone: "" }));
    setPrefilled(false);
  }

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus("sending");
    try {
      const res = await fetch("/api/enquiry", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...fields, lang }),
      });
      if (!res.ok) throw new Error(await res.text());
      if (ConsentStore.allowsOptional) {
        try {
          localStorage.setItem(CONTACT_DETAILS_KEY, JSON.stringify({
            name: fields.name, email: fields.email, phone: fields.phone,
          }));
        } catch (e) {}
      }
      setStatus("sent");
    } catch {
      setStatus("error");
    }
  }

  const inputStyle = {
    fontFamily: "var(--font-body)", fontSize: 15,
    width: "100%", padding: "12px 16px",
    background: "var(--paper)", color: "var(--fg-1)",
    border: "1.5px solid var(--border-1)", borderRadius: 10,
    outline: "none", boxSizing: "border-box",
    transition: "border-color .15s",
  };
  const labelStyle = {
    fontFamily: "var(--font-body)", fontWeight: 600,
    fontSize: 11.5, letterSpacing: ".16em",
    textTransform: "uppercase", color: "var(--fg-3)",
    display: "block", marginBottom: 6,
  };

  if (status === "sent") {
    return (
      <div style={{
        background: "var(--paper)", border: "1.5px solid var(--border-1)",
        borderRadius: 18, padding: "48px 36px", textAlign: "center",
      }}>
        <div style={{ fontSize: 36, marginBottom: 16 }}>✓</div>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 26, color: "var(--ink)", margin: "0 0 10px" }}>
          {ct("home.contactForm.sentTitle", "Message received", "已收到你的留言")}
        </h3>
        <p style={{ color: "var(--fg-2)", fontSize: 15, lineHeight: 1.6, margin: 0 }}>
          {ct("home.contactForm.sentBody", "I'll be in touch within one working day.", "我会在一个工作日内与你联系。")}
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} style={{
      background: "var(--paper)", border: "1.5px solid var(--border-1)",
      borderRadius: 18, padding: "36px 36px 32px",
      display: "flex", flexDirection: "column", gap: 18,
    }}>
      <div style={{ fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--ink-navy)", fontWeight: 600 }}>
        {ct("home.contactForm.heading", "Send a message", "发送留言")}
      </div>

      {prefilled && (
        <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--fg-3)", marginTop: -6 }}>
          {t("Your details are filled in from last time.", "已为你填入上次的联系方式。")}{" "}
          <button type="button" onClick={forgetDetails} style={{
            appearance: "none", background: "none", border: "none", padding: 0,
            font: "inherit", color: "var(--coral-deep)", cursor: "pointer",
            textDecoration: "underline",
          }}>
            {t("Not you? Clear them.", "不是你？清除。")}
          </button>
        </div>
      )}

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <div>
          <label style={labelStyle}>{ct("home.contactForm.nameLabel", "Name *", "姓名 *")}</label>
          <input required style={inputStyle} value={fields.name} onChange={set("name")} placeholder={ct("home.contactForm.namePlaceholder", "Your name", "你的姓名")}/>
        </div>
        <div>
          <label style={labelStyle}>{ct("home.contactForm.emailLabel", "Email *", "邮箱 *")}</label>
          <input required type="email" style={inputStyle} value={fields.email} onChange={set("email")} placeholder="you@example.com"/>
        </div>
      </div>

      <div>
        <label style={labelStyle}>{ct("home.contactForm.phoneLabel", "Phone (optional)", "电话（可选）")}</label>
        <input style={inputStyle} value={fields.phone} onChange={set("phone")} placeholder={ct("home.contactForm.phonePlaceholder", "+44 …", "+44 …")}/>
      </div>

      <div>
        <label style={labelStyle}>{ct("home.contactForm.messageLabel", "Message *", "留言 *")}</label>
        <textarea
          required
          rows={5}
          style={{ ...inputStyle, resize: "vertical", lineHeight: 1.55 }}
          value={fields.message}
          onChange={set("message")}
          placeholder={ct("home.contactForm.messagePlaceholder",
            "Tell me a little about what you're looking for…",
            "简单聊聊你在寻找什么……"
          )}
        />
      </div>

      {status === "error" && (
        <div style={{ fontSize: 13.5, color: "var(--error)", background: "rgba(184,66,94,.08)", borderRadius: 8, padding: "10px 14px" }}>
          {ct("home.contactForm.errorMsg", "Something went wrong — please try again or email me directly.", "出现了问题，请重试或直接发邮件联系我。")}
        </div>
      )}

      <Button kind="coral" size="lg" style={{ alignSelf: "flex-start" }}>
        {status === "sending"
          ? ct("home.contactForm.sending", "Sending…", "发送中…")
          : <>{ct("home.contactForm.submit", "Send message", "发送留言")}&nbsp;<I.Arrow/></>}
      </Button>
    </form>
  );
}

function ContactCTA({ assetBase = "" }) {
  const { lang, t, ct, raw } = useCT();
  return (
    <section id="contact" style={{
      position: "relative",
      backgroundImage: `linear-gradient(rgba(253, 250, 243,.86), rgba(253, 250, 243,.94)), url('${assetBase}assets/photo-lake-clean.png')`,
      backgroundSize: "cover", backgroundPosition: "center",
      padding: "112px 0",
    }}>
      <PageFrame>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 72, alignItems: "start" }}>
          {/* Left: headline + quick-contact */}
          <div>
            <Eyebrow>{ct("home.contact.eyebrow", "You are welcome here", "你随时受欢迎")}</Eyebrow>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 500,
              fontSize: "clamp(44px, 5vw, 72px)", lineHeight: 1.04,
              letterSpacing: "-.01em", color: "var(--ink)",
              margin: "20px 0 22px", maxWidth: "16ch",
            }}>
              {t(<>You are always welcome to <em style={{ fontStyle: "italic", color: "var(--coral-deep)", fontWeight: 400 }}>have a chat.</em></>,
                 <>欢迎你，<em style={{ fontStyle: "italic", color: "var(--coral-deep)", fontWeight: 400 }}>来聊聊。</em></>)}
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--fg-2)", maxWidth: "44ch", margin: "0 0 28px" }}>
              {ct("home.contact.lede", "Fill in the form, send a WhatsApp, or scan a QR code — whichever feels easiest. I reply within one working day. The first 30 minutes are free.",
                 "填写表单、发送 WhatsApp，或扫描二维码 — 选最轻松的方式。一个工作日内回复。前 30 分钟免费。")}
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginBottom: 32 }}>
              <Button kind="coral" size="lg" href="https://wa.me/447986935783">
                <I.WhatsApp/>&nbsp;{ct("home.contact.whatsappBtn", "Open WhatsApp", "打开 WhatsApp")}
              </Button>
              <Button kind="ghost" size="lg" href="mailto:cambridgearkcoaching@gmail.com">
                {ct("home.contact.emailBtn", "Send an email", "发送邮件")}
              </Button>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginBottom: 28 }}>
              <QrCard src={assetBase + "assets/qr-whatsapp.png"} label="WhatsApp" sublabel={ct("home.contact.qrWhatsappSub", "Scan to chat", "扫码对话")}/>
              <QrCard src={assetBase + "assets/qr-wechat.png"} label="WeChat" sublabel={raw("home.contact.qrWechatSub", "扫码加微信")}/>
            </div>

            <div style={{ fontFamily: "var(--font-hand)", fontSize: 40, color: "var(--ink-navy)", lineHeight: 1 }}>
              ~ {t("Tao Yu", "Tao Yu")}
            </div>
          </div>

          {/* Right: contact form */}
          <div>
            <ContactForm lang={lang}/>
          </div>
        </div>
      </PageFrame>
    </section>
  );
}
function QrCard({ src, label, sublabel }) {
  return (
    <div style={{
      background: "var(--paper)", border: "1px solid var(--border-1)",
      borderRadius: 16, padding: 22, display: "flex", flexDirection: "column",
      alignItems: "center", gap: 12, boxShadow: "var(--shadow-1)",
    }}>
      <img src={src} alt={label} style={{ width: 160, height: 160, display: "block" }}/>
      <div style={{ fontFamily: "var(--font-body)", fontSize: 13, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--ink-navy)", fontWeight: 600 }}>{label}</div>
      <div style={{ fontSize: 12, color: "var(--fg-3)" }}>{sublabel}</div>
    </div>
  );
}

// ── AdvisorStrip — homepage teaser linking to About page ──────────
function AdvisorStrip({ base = "" }) {
  const { t, ct } = useCT();
  const advisors = [
    {
      name: "Prof. Alan Barrell",
      role: t("Advisor · Chairman, Cambridge Worldwide Associates", "顾问 · 剑桥全球联合会主席"),
      bio:  t(
        "A leading Cambridge entrepreneur, investor and philanthropist with decades of experience building and advising high-impact organisations globally.",
        "剑桥杰出企业家、投资人与慈善家，数十年来在全球范围内创建并顾问高影响力机构。"
      ),
    },
    {
      name: "John Willis",
      role: t("Advisor · Founder & Chief Ambassador, Power2Inspire", "顾问 · Power2Inspire 创始人及首席大使"),
      bio:  t(
        "Pride of Britain Award winner and founder of Power2Inspire, a charity dedicated to ensuring no one is left on the bench. John's life and mission embody the belief that anything is possible.",
        "英国骄傲奖得主，Power2Inspire 慈善机构创始人，致力于确保每个人都能参与其中。John 的人生与使命体现了'一切皆有可能'的信念。"
      ),
    },
  ];

  return (
    <section style={{ background: "var(--ink-navy)", padding: "80px 40px" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 16, marginBottom: 48 }}>
          <div>
            <p style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--coral)", margin: "0 0 10px" }}>
              {ct("home.advisors.eyebrow", "Supported by", "顾问团队")}
            </p>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(26px,3.5vw,38px)", color: "var(--paper)", margin: 0, lineHeight: 1.15 }}>
              {ct("home.advisors.heading", "Guided by experience.", "经验之道。")}
            </h2>
          </div>
          <a href={base + "pages/About.html"} style={{
            fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 13,
            letterSpacing: ".12em", textTransform: "uppercase",
            color: "rgba(253,250,243,.6)", textDecoration: "none",
            borderBottom: "1px solid rgba(253,250,243,.3)", paddingBottom: 2,
            whiteSpace: "nowrap",
          }}>
            {ct("home.advisors.meetTeamLink", "Meet the team →", "了解团队 →")}
          </a>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 24 }}>
          {advisors.map(a => (
            <div key={a.name} style={{
              background: "rgba(255,255,255,.06)", border: "1px solid rgba(255,255,255,.1)",
              borderRadius: 18, padding: "28px 28px 24px",
            }}>
              <div style={{ width: 56, height: 56, borderRadius: "50%", background: "rgba(235,154,133,.2)", border: "1.5px solid rgba(235,154,133,.4)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--coral)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 20, color: "var(--paper)", marginBottom: 4 }}>{a.name}</div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--coral)", marginBottom: 14 }}>{a.role}</div>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "rgba(253,250,243,.7)", lineHeight: 1.75, margin: 0 }}>{a.bio}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  IsThisYou, ServicesGrid, ServiceCard,
  HowSession, Testimonials, VoiceCard,
  SeminarsStrip, BilingualBand, ContactForm, ContactCTA, QrCard,
  AdvisorStrip,
});
