/* CareerPlanner → closing CTA band.
   The bottom section is no longer a live AI box. It's a simple, high-impact
   call to action built around the brand punchline: one platform that takes a
   trainer from planning to performing. Keeps id="about" so the "Why us" nav
   anchor still lands here. Independent - we don't sell courses. */

function CareerPlanner({ onOpenChat, onBrowse }) {
  const journey = ["Plan", "Learn", "Business"];
  return (
    <section id="about" style={{ background: "var(--tr-paper-2)" }}>
      <div className="container" style={{ padding: "88px var(--tr-gutter)" }}>
        <div className="reveal" style={{
          position: "relative", overflow: "hidden", borderRadius: 28, padding: "76px 64px",
          textAlign: "center", color: "#fff", maxWidth: 1000, margin: "0 auto",
          background: "var(--tr-brand-900)",
          boxShadow: "var(--tr-shadow-lg)",
        }}>
          {/* real-life photo backdrop */}
          <img src={(window.TR_CONTENT.photoUrl("_cta", 1500) || "img/hyrox.jpg")} alt="" draggable="false"
            onError={(e) => { if (!e.target.dataset.fb) { e.target.dataset.fb = "1"; e.target.src = "img/hyrox.jpg"; } }}
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block", opacity: 0.5 }} />
          <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 50% -10%, rgba(43,164,135,0.45), transparent 58%), linear-gradient(180deg, rgba(6,56,44,0.82) 0%, rgba(6,56,44,0.92) 100%)" }}></div>

          {/* faint brand watermark */}
          <div aria-hidden="true" style={{ position: "absolute", right: 36, bottom: -28, fontFamily: "var(--tr-font-display)", fontWeight: 800, fontSize: 200, lineHeight: 1, color: "rgba(255,255,255,0.05)", letterSpacing: "-0.04em", pointerEvents: "none", userSelect: "none" }}>
            [tr]
          </div>

          <div style={{ position: "relative" }}>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 9, fontSize: 12.5, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,0.72)" }}>
              <span style={{ color: "var(--tr-amber-400)", fontWeight: 800 }}>[tr]</span> Your fitness business starts here
            </div>

            <h2 style={{ fontFamily: "var(--tr-font-display)", fontWeight: 700, fontSize: 52, lineHeight: 1.05, letterSpacing: "-0.03em", margin: "18px auto 0", maxWidth: 780, color: "#fff", textWrap: "balance" }}>
              Stop working for someone else. Start your <span style={{ color: "var(--tr-amber-400)" }}>fitness business</span> today.
            </h2>

            <p style={{ fontFamily: "var(--tr-font-text)", fontSize: 18.5, lineHeight: 1.55, color: "rgba(255,255,255,0.82)", margin: "20px auto 0", maxWidth: 560, textWrap: "pretty" }}>
              Get qualified, find your niche, and build a business that's yours. Honest guidance, no course sales, one place to make it happen.
            </p>

            {/* journey: Plan → Qualify → Perform */}
            <div style={{ display: "inline-flex", alignItems: "center", gap: 12, flexWrap: "wrap", justifyContent: "center", margin: "30px auto 0" }}>
              {journey.map((step, i) => (
                <React.Fragment key={step}>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.18)", borderRadius: 999, padding: "9px 18px", fontFamily: "var(--tr-font-display)", fontWeight: 700, fontSize: 16, color: "#fff" }}>
                    <span style={{ fontFamily: "var(--tr-font-mono)", fontSize: 12, color: "var(--tr-amber-400)" }}>{"0" + (i + 1)}</span> {step}
                  </span>
                  {i < journey.length - 1 && <Icon name="arrow-right" size={18} style={{ color: "rgba(255,255,255,0.45)" }} />}
                </React.Fragment>
              ))}
            </div>

            {/* actions */}
            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 14, flexWrap: "wrap", margin: "34px 0 0" }}>
              <button onClick={onBrowse} style={{ display: "inline-flex", alignItems: "center", gap: 9, height: 54, padding: "0 26px", borderRadius: 12, border: "none", background: "var(--tr-amber-400)", color: "var(--tr-ink)", fontFamily: "var(--tr-font-text)", fontWeight: 700, fontSize: 16, cursor: "pointer", transition: "transform .12s var(--tr-ease-out), background .2s" }}
                onMouseEnter={(e) => { e.currentTarget.style.background = "var(--tr-amber-300)"; e.currentTarget.style.transform = "translateY(-1px)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = "var(--tr-amber-400)"; e.currentTarget.style.transform = "none"; }}>
                Compare all courses <Icon name="arrow-right" size={18} />
              </button>
              <button onClick={onOpenChat} style={{ display: "inline-flex", alignItems: "center", gap: 9, height: 54, padding: "0 24px", borderRadius: 12, border: "1.5px solid rgba(255,255,255,0.3)", background: "transparent", color: "#fff", fontFamily: "var(--tr-font-text)", fontWeight: 600, fontSize: 16, cursor: "pointer", transition: "background .2s, border-color .2s" }}
                onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(255,255,255,0.1)"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.5)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.3)"; }}>
                <Icon name="sparkles" size={17} /> Talk to a guide
              </button>
            </div>

            <div style={{ display: "inline-flex", alignItems: "center", gap: 8, marginTop: 22, fontSize: 13, color: "rgba(255,255,255,0.6)" }}>
              <Icon name="shield-check" size={15} style={{ color: "var(--tr-amber-400)" }} />
              Free · no sign-up · independent. We don't sell courses.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.CareerPlanner = CareerPlanner;