/* global React */

// ---------------------------------------------------------------
// hero-variants.jsx
// HeroA: animated boat+heart, brand-mark front and centre.
// HeroB: bold verb-led headline + portrait inset.
// HeroC: publication-style oversized italic pull-quote, centred.
// ---------------------------------------------------------------

// ---- BoatPicker — live variant switcher (dev / review only) --
const BOAT_VARIANTS = [
  { id: "B", label: "Dinghy",  Cmp: () => BoatHeartAnimB({ size: 560 }) },
  { id: "C", label: "Sloop",   Cmp: () => BoatHeartAnimC({ size: 560 }) },
  { id: "D", label: "Punt",    Cmp: () => BoatHeartAnimD({ size: 560 }) },
  { id: "A", label: "Original",Cmp: () => BoatHeartAnim({ size: 560 }) },
];

function BoatPicker({ assetBase, t }) {
  const [active, setActive] = React.useState("B");
  const variant = BOAT_VARIANTS.find(v => v.id === active);

  return (
    <div style={{ position: "relative" }}>
      {/* variant toggle */}
      <div style={{
        position: "absolute", top: 12, right: 0, zIndex: 10,
        display: "flex", gap: 4,
        background: "var(--paper-2)", border: "1px solid var(--border-1)",
        borderRadius: 999, padding: 3,
      }}>
        {BOAT_VARIANTS.map(v => (
          <button key={v.id} onClick={() => setActive(v.id)} style={{
            fontFamily: "var(--font-body)", fontWeight: 600,
            fontSize: 10.5, letterSpacing: ".1em",
            padding: "5px 12px", borderRadius: 999, border: "none", cursor: "pointer",
            background: active === v.id ? "var(--ink-navy)" : "transparent",
            color: active === v.id ? "var(--paper)" : "var(--fg-2)",
            transition: "background .15s, color .15s",
          }}>{v.label}</button>
        ))}
      </div>

      {variant.Cmp()}

      {/* floating quote tag */}
      <div style={{
        position: "absolute", left: 8, bottom: 36, zIndex: 2,
        background: "var(--paper)", padding: "12px 18px",
        borderRadius: 14, boxShadow: "var(--shadow-2)",
        border: "1px solid var(--border-1)",
        display: "flex", alignItems: "center", gap: 12, maxWidth: 240,
      }}>
        <div style={{ width: 36, height: 36, borderRadius: 999, background: "var(--coral-wash)", color: "var(--ink-navy)", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <I.Heart size={18}/>
        </div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 13, lineHeight: 1.35, color: "var(--ink)" }}>
          {t("“Tao met me where I was, and walked at my pace.”", "“Tao 接纳真实的我，与我同行。”")}
        </div>
      </div>
    </div>
  );
}

// ---- HeroA — Vessel of motion -------------------------------
function HeroA({ assetBase = "" }) {
  const { t, ct } = useCT();
  const mobile = useIsMobile();
  return (
    <section style={{ position: "relative", background: "var(--paper)", overflow: "hidden" }}>
      <div aria-hidden style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: "radial-gradient(ellipse at 70% 30%, rgba(251,231,223,.7), transparent 55%)",
      }}/>
      <PageFrame style={{ position: "relative", padding: "64px 40px 96px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.05fr .95fr", gap: 64, alignItems: "center" }}>
          <div>
            <Eyebrow>{ct("home.hero.eyebrow", "ADHD · Autism · Neurodivergent coaching", "多动症 · 自闭症 · 神经多样性")}</Eyebrow>

            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 500,
              fontSize: "clamp(28px, 3.8vw, 52px)", lineHeight: 1.08,
              letterSpacing: "-.015em", color: "var(--ink)",
              margin: "24px 0 28px", maxWidth: "14ch",
            }}>
              {t(
                <>Your mind moves differently. <em style={{ fontStyle: "italic", color: "var(--coral-deep)", fontWeight: 400 }}>Let&rsquo;s find the current that carries you.</em></>,
                <>你的思维与众不同。<em style={{ fontStyle: "italic", color: "var(--coral-deep)", fontWeight: 400 }}>让我们找到属于你的航向。</em></>
              )}
            </h1>

            <p style={{
              fontFamily: "var(--font-body)", fontSize: 19, lineHeight: 1.65,
              color: "var(--fg-2)", margin: 0, maxWidth: "44ch",
            }}>
              {ct("home.hero.lede",
                "ICF-accredited coaching for ADHD and Autistic children and adults, and the families beside them. Steady waters. Honest conversation. Practical change.",
                "ICF 认证教练。为多动症、自闭症儿童及成人及其家庭，提供平稳的支持与切实的改变。"
              )}
            </p>

            <div style={{ display: "flex", flexWrap: "wrap", gap: 14, marginTop: 36 }}>
              <Button kind="coral" size="lg" href="#contact">
                <I.WhatsApp/>&nbsp;{ct("home.hero.ctaPrimary", "Message Tao on WhatsApp", "WhatsApp 联系")}
              </Button>
              <Button kind="ghost" size="lg" href="#services">
                {ct("home.hero.ctaSecondary", "See what I offer", "了解服务")}&nbsp;<I.Arrow/>
              </Button>
            </div>

            <div style={{ display: "flex", alignItems: "center", gap: 18, marginTop: 40 }}>
              <img src={assetBase + "assets/badge-icf.png"} alt="" style={{ height: 36 }}/>
              <div style={{ width: 1, height: 30, background: "var(--border-2)", opacity: .5 }}/>
              <img src={assetBase + "assets/badge-insight-coaching.png"} alt="" style={{ height: 44 }}/>
              <div style={{ width: 1, height: 30, background: "var(--border-2)", opacity: .5 }}/>
              <span style={{ fontFamily: "var(--font-body)", fontSize: 12, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--fg-3)" }}>
                {t("English · 中文", "中英双语")}
              </span>
            </div>
          </div>

          <div>
            <img
              src={assetBase + "assets/photo-tao-library.jpg"}
              alt="Tao Yu"
              style={{
                display: "block", width: "100%", maxWidth: 360,
                aspectRatio: "1/1", objectFit: "cover", borderRadius: 18,
                boxShadow: "var(--shadow-3)", margin: "0 auto 20px",
              }}
            />

            {/* Boat-heart animation — logo-faithful boat that sails away on scroll.
                Kept as a separate box below (not overlapped) because its scroll-linked
                "sail away" transform moves the boat/heart up and to the right, which
                would otherwise collide with anything placed on top of it. */}
            <div style={{ position: "relative" }}>
              <BoatHeartLogoVoyage size={360}/>
            <div style={mobile ? {
              position: "static", margin: "18px auto 0", zIndex: 2,
              background: "var(--paper)", padding: "12px 18px",
              borderRadius: 14, boxShadow: "var(--shadow-2)",
              border: "1px solid var(--border-1)",
              display: "flex", alignItems: "center", gap: 12, maxWidth: 360,
            } : {
              position: "absolute", left: 8, bottom: 36, zIndex: 2,
              background: "var(--paper)", padding: "12px 18px",
              borderRadius: 14, boxShadow: "var(--shadow-2)",
              border: "1px solid var(--border-1)",
              display: "flex", alignItems: "center", gap: 12, maxWidth: 240,
            }}>
              <div style={{ width: 36, height: 36, borderRadius: 999, background: "var(--coral-wash)", color: "var(--ink-navy)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <I.Heart size={18}/>
              </div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 13, lineHeight: 1.35, color: "var(--ink)" }}>
                {t("“Tao met me where I was, and walked at my pace.”", "“Tao 接纳真实的我，与我同行。”")}
              </div>
            </div>
          </div>
          </div>
        </div>
      </PageFrame>
    </section>
  );
}

// ---- HeroB — Bold verb-led + portrait inset -----------------
function HeroB({ assetBase = "" }) {
  const { t } = useLang();
  return (
    <section style={{ position: "relative", background: "var(--paper)" }}>
      <PageFrame style={{ padding: "64px 40px 96px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 56, alignItems: "center" }}>
          <div>
            <Eyebrow>{t("Empowering ADHD & Autistic adults", "赋能多动症与自闭症成人")}</Eyebrow>

            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 500,
              fontSize: "clamp(56px, 8vw, 112px)", lineHeight: .98,
              letterSpacing: "-.022em", color: "var(--ink)",
              margin: "24px 0 0", maxWidth: "10ch",
            }}>
              {t(
                <>Stop <em style={{ fontStyle: "italic", color: "var(--coral-deep)" }}>masking</em>.<br/>Start <em style={{ fontStyle: "italic", color: "var(--coral-deep)" }}>moving</em>.</>,
                <>不必<em style={{ fontStyle: "italic", color: "var(--coral-deep)" }}>掩饰</em>。<br/>放手<em style={{ fontStyle: "italic", color: "var(--coral-deep)" }}>前行</em>。</>
              )}
            </h1>

            <p style={{
              fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 22, lineHeight: 1.55,
              color: "var(--fg-2)", margin: "28px 0 0", maxWidth: "40ch",
            }}>
              {t(
                "Coaching for neurodivergent adults who are done apologising for the way their brain works — and ready to build a life around it.",
                "为不再为大脑运转方式而道歉的神经多样性成人，建立属于自己的人生节奏。"
              )}
            </p>

            <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 36 }}>
              <Button kind="coral" size="lg" href="#contact">
                <I.WhatsApp/>&nbsp;{t("Start with a chat", "开始对话")}
              </Button>
              <Button kind="ghost" size="lg" href="#how">
                {t("How a session works", "教练流程")}
              </Button>
            </div>

            <div style={{ marginTop: 44, display: "flex", alignItems: "center", gap: 20, flexWrap: "wrap" }}>
              <Stat n="100+" l={t("Sessions held", "已完成教练会谈")}/>
              <Stat n="2" l={t("Languages", "工作语言")}/>
              <Stat n="ICF" l={t("Accredited", "国际认证")}/>
            </div>
          </div>

          <div style={{ position: "relative" }}>
            <div aria-hidden style={{
              position: "absolute", top: 24, right: -16, width: "94%", height: "94%",
              background: "var(--coral-wash)", borderRadius: 22, zIndex: 0,
            }}/>
            <img
              src={assetBase + "assets/photo-taoyu-portrait.png"}
              alt="Tao Yu"
              style={{
                position: "relative", zIndex: 1, width: "100%",
                aspectRatio: "4/5", objectFit: "cover", borderRadius: 22,
                boxShadow: "var(--shadow-3)", display: "block",
              }}
            />
            <div style={{
              position: "absolute", left: -18, bottom: 36, zIndex: 2,
              background: "var(--ink-navy)", color: "var(--paper)",
              padding: "16px 22px", borderRadius: 16, boxShadow: "var(--shadow-3)",
              maxWidth: 260,
            }}>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 10.5, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--coral-soft)", fontWeight: 600 }}>
                {t("Meet Tao", "认识 Tao")}
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 17, lineHeight: 1.35, marginTop: 6 }}>
                {t("Life · Insight · ADHD Coach. SEND advocate. Mother of two.", "生命教练 · ADHD 教练 · 特殊教育倡导者 · 两个女儿的母亲。")}
              </div>
            </div>
          </div>
        </div>
      </PageFrame>
    </section>
  );
}
function Stat({ n, l }) {
  return (
    <div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 34, lineHeight: 1, color: "var(--ink-navy)" }}>{n}</div>
      <div style={{ fontFamily: "var(--font-body)", fontSize: 11, letterSpacing: ".2em", textTransform: "uppercase", color: "var(--fg-3)", marginTop: 6 }}>{l}</div>
    </div>
  );
}

// ---- HeroC — Centred pull-quote, publication style ----------
function HeroC({ assetBase = "" }) {
  const { t } = useLang();
  return (
    <section style={{ position: "relative", background: "var(--paper)", overflow: "hidden" }}>
      <div aria-hidden style={{
        position: "absolute", top: 60, left: "50%", transform: "translateX(-50%)",
        opacity: .07, width: 360,
      }}>
        <img src={assetBase + "assets/logo-boat-heart.png"} alt="" style={{ width: "100%" }}/>
      </div>

      <PageFrame style={{ position: "relative", padding: "88px 40px 88px", maxWidth: 1100 }}>
        <div style={{ textAlign: "center", maxWidth: 940, margin: "0 auto" }}>
          <Eyebrow style={{ display: "inline-block" }}>
            {t("Coaching for ADHD · Autism · SEND families", "ADHD · 自闭症 · 特殊教育家庭教练")}
          </Eyebrow>

          <div style={{ position: "relative", marginTop: 36 }}>
            <span style={{ position: "absolute", left: -20, top: -18, fontFamily: "var(--font-display)", fontSize: 140, lineHeight: 1, color: "var(--coral)", opacity: .6 }}>&ldquo;</span>
            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 400, fontStyle: "italic",
              fontSize: "clamp(46px, 6.2vw, 88px)", lineHeight: 1.08,
              letterSpacing: "-.01em", color: "var(--ink)",
              margin: 0, maxWidth: "20ch", marginInline: "auto",
              textWrap: "pretty",
            }}>
              {t(
                <>A <span style={{ color: "var(--coral-deep)" }}>safe vessel</span> for the changes you&rsquo;re ready to make &mdash; held in two languages, anchored in ICF practice.</>,
                <>承载你想做出的<span style={{ color: "var(--coral-deep)" }}>改变</span>之舟 &mdash; 中英双语，ICF 教练标准护航。</>
              )}
            </h1>
          </div>

          <div style={{ marginTop: 36, fontFamily: "var(--font-hand)", fontSize: 38, color: "var(--ink-navy)", lineHeight: 1 }}>
            ~ {t("Tao Yu", "Tao Yu")}
          </div>
          <div style={{ marginTop: 8, fontFamily: "var(--font-body)", fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--fg-3)" }}>
            {t("ICF · Insight Coaching · SEN Advocate", "ICF · Insight Coaching · 特殊教育唁导者")}
          </div>

          <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: 14, marginTop: 40 }}>
            <Button kind="coral" size="lg" href="#contact">
              <I.WhatsApp/>&nbsp;{t("Message Tao", "联系 Tao")}
            </Button>
            <Button kind="ghost" size="lg" href="#services">
              {t("What she offers", "教练服务")}
            </Button>
          </div>
        </div>

        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "1fr 1.2fr 1fr", gap: 18 }}>
          {[
            { src: "photo-taoyu-portrait.png",   h: 280, top: 24 },
            { src: "photo-coaching-session.png",  h: 320, top: 0  },
            { src: "photo-taoyu-speaking.png",    h: 280, top: 24 },
          ].map((p, i) => (
            <div key={i} style={{ marginTop: p.top }}>
              <img src={assetBase + "assets/" + p.src} alt="" style={{
                width: "100%", height: p.h, objectFit: "cover",
                borderRadius: 18, boxShadow: "var(--shadow-2)", display: "block",
              }}/>
            </div>
          ))}
        </div>
      </PageFrame>
    </section>
  );
}

Object.assign(window, { HeroA, HeroB, HeroC, BoatPicker });