/* Alora marketing one-pager — sections.jsx
   All sections in one file. Each section is a top-level component. */

/* Single source of truth for the "apply" mailto. Update subject / body here. */
const APPLY_MAILTO = "mailto:Careers@alora.ca"
  + "?subject=" + encodeURIComponent("Application – Field sales contractor")
  + "&body=" + encodeURIComponent(
      "Hi Alora team,\n\n"
    + "I'd like to apply for the field sales contractor role.\n\n"
    + "Name:\n"
    + "Phone:\n"
    + "City (Calgary area?):\n"
    + "Reliable transportation? (yes / no):\n"
    + "Availability (days / hours):\n"
    + "Why sales? Why now?:\n\n"
    + "Thanks,\n"
  );
const CONTACT_MAILTO = "mailto:Careers@alora.ca";

/* ============================================================
   TopNav — sticky, white, hairline-bottom
   ============================================================ */
function TopNav() {
  const items = [
    ["Programs",     "#pillars"],
    ["Mission",      "#mission"],
    ["Top leaders",  "#leaders"],
    ["Contact",      "#contact"],
  ];
  return (
    <nav className="top-nav">
      <div className="container-wide" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 44 }}>
          <a href="#top" className="brand">
            <img src="design-system/assets/alora-mark-color.png" width="34" height="34" alt="Alora" style={{ display: "block" }} />
            Alora
          </a>
          <div className="menu">
            {items.map(([label, href]) => (
              <a key={label} href={href}>{label}</a>
            ))}
          </div>
        </div>
        <div className="right">
          <a className="btn btn-primary" href={APPLY_MAILTO}>Apply now</a>
        </div>
      </div>
    </nav>
  );
}

/* ============================================================
   Hero — type-driven, with imagery slot + stat strip
   ============================================================ */
function Hero() {
  return (
    <section id="top" style={{ paddingTop: 72, paddingBottom: 96 }}>
      <div className="container-wide">
        {/* Top row: badge */}
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 28 }}>
          <span className="badge dot">Now hiring · Field sales contractors · Calgary, AB</span>
        </div>

        {/* Headline */}
        <h1 className="mega reveal" style={{ textAlign: "center", margin: "0 auto 24px", maxWidth: 1080 }}>
          Recruit ambition.<br />Train closers.<br />Build leaders.
        </h1>

        {/* Subhead */}
        <p className="lead" style={{ textAlign: "center", fontSize: 20, maxWidth: 680, margin: "0 auto 36px" }}>
          Alora recruits ambitious people, trains them with real-world reps and
          daily mentorship, and grows them into the next generation of sales leaders.
        </p>

        {/* CTAs */}
        <div style={{ display: "flex", justifyContent: "center", gap: 12, marginBottom: 56 }}>
          <a className="btn btn-primary btn-lg" href={APPLY_MAILTO}>Apply to join</a>
        </div>

        {/* Hero canvas — image slot for team photo */}
        <div className="hero-canvas" style={{ position: "relative", aspectRatio: "21 / 9", maxWidth: 1240, margin: "0 auto" }}>
          <image-slot
            id="hero-banner"
            shape="rect"
            src="photos/hero-team-wide.jpg"
            position="50% 30%"
            placeholder="Drop hero / team photo (21:9)"
            style={{ width: "100%", height: "100%", display: "block" }}
          ></image-slot>
        </div>

      </div>
    </section>
  );
}

/* ============================================================
   WeHelpCompanies — 4 pillars: Leadership, Growth, Collaboration, Environment
   ============================================================ */
function Pillars() {
  const pillars = [
    {
      glyph: "◆",
      title: "Leadership",
      body: "We develop leaders, not just reps. Daily leadership reps, weekly 1:1s, and a clear ladder from apprentice to manager.",
      bullets: ["Daily floor-leadership reps", "Weekly 1:1 mentorship", "Apprentice → manager ladder"],
    },
    {
      glyph: "↗",
      title: "Growth",
      body: "We invest in the whole person. Sales skills, communication, accountability — built through real reps, not slide decks.",
      bullets: ["Personal + professional development", "Real-world sales reps", "Goal-setting cadence"],
    },
    {
      glyph: "◧",
      title: "Collaboration",
      body: "We win as a floor. Cross-team standups, shared playbooks, peer coaching — diverse perspectives, common goals.",
      bullets: ["Daily floor standup", "Shared playbook", "Peer coaching pairs"],
    },
    {
      glyph: "★",
      title: "Environment",
      body: "We surpass the client's bar — and have fun doing it. Weekly team nights. Quarterly trips for top performers.",
      bullets: ["Weekly team nights", "Quarterly performance trips", "Strong, lasting relationships"],
    },
  ];
  return (
    <section id="pillars" className="section" style={{ background: "var(--color-surface-soft)" }}>
      <div className="container-wide">
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <span className="eyebrow" style={{ marginBottom: 16, display: "block" }}>We help companies</span>
          <h2 className="mega-md reveal" style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 60, lineHeight: 1.05, letterSpacing: "-0.03em", color: "var(--color-ink)", maxWidth: 820, margin: "0 auto" }}>
            Grow their customer base.<br />Outperform their competition.
          </h2>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 16,
        }}>
          {pillars.map((p, idx) => (
            <article key={p.title} className="card-feature" style={{ background: "var(--color-canvas)", border: "1px solid var(--color-hairline)", display: "flex", flexDirection: "column", gap: 16 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div style={{
                  width: 44, height: 44,
                  borderRadius: 10,
                  background: "var(--color-surface-card)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  fontSize: 20, color: "var(--color-ink)",
                }}>{p.glyph}</div>
                <span className="mono" style={{ fontSize: 12, color: "var(--color-muted)" }}>0{idx + 1}</span>
              </div>
              <h3 style={{ fontSize: 26, letterSpacing: "-0.02em", margin: 0 }}>{p.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--color-body)" }}>{p.body}</p>
              <hr className="rule" style={{ marginTop: "auto" }} />
              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 6 }}>
                {p.bullets.map(b => (
                  <li key={b} style={{ fontSize: 13, color: "var(--color-body)", display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={{ color: "var(--color-ink)" }}>↳</span>
                    {b}
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   AnimatedStat — counts up from 0 when scrolled into view.
   Preserves any non-digit prefix ($) and suffix (+ % M k).
   ============================================================ */
function AnimatedStat({ value }) {
  const match = React.useMemo(
    () => String(value).match(/^(\D*)([\d.]+)(.*)$/),
    [value]
  );
  const prefix  = match ? match[1] : "";
  const target  = match ? parseFloat(match[2]) : 0;
  const suffix  = match ? match[3] : "";
  const decimals = match && match[2].includes(".")
    ? match[2].split(".")[1].length
    : 0;

  const [n, setN] = React.useState(0);
  const ref = React.useRef(null);
  const started = React.useRef(false);

  React.useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const duration = 1600;
          const tick = (t) => {
            const p = Math.min(1, (t - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3); // easeOutCubic
            setN(target * eased);
            if (p < 1) requestAnimationFrame(tick);
            else setN(target);
          };
          requestAnimationFrame(tick);
          obs.disconnect();
        }
      });
    }, { threshold: 0.3 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [target]);

  const display = decimals > 0
    ? n.toFixed(decimals)
    : Math.round(n).toLocaleString();

  return (
    <span ref={ref}>{prefix}{display}{suffix}</span>
  );
}

/* ============================================================
   Mission — editorial spread + stat counters
   ============================================================ */
function Mission() {
  const stats = [
    { v: "320+", k: "Reps placed in 2025" },
    { v: "$24M", k: "Commissions earned" },
    { v: "94%",  k: "Cohort completion rate" },
    { v: "12k+", k: "Cups of coffee" },
  ];

  return (
    <section id="mission" className="section">
      <div className="container-wide">
        <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 80, alignItems: "center", marginBottom: 72 }}>
          {/* Left: image-slot */}
          <div style={{ borderRadius: "var(--radius-xl)", overflow: "hidden", aspectRatio: "4 / 5", background: "var(--color-surface-card)" }}>
            <image-slot
              id="mission-photo"
              shape="rect"
              src="photos/mission.jpg"
              placeholder="Mission photo · floor / classroom (4:5)"
              style={{ width: "100%", height: "100%", display: "block" }}
            ></image-slot>
          </div>

          {/* Right: copy */}
          <div>
            <span className="eyebrow" style={{ marginBottom: 16, display: "block" }}>Our mission</span>
            <h2 className="reveal" style={{ fontSize: 52, lineHeight: 1.08, letterSpacing: "-0.03em", marginBottom: 24, textWrap: "balance" }}>
              We turn entry-level reps into the leaders our partners hire next.
            </h2>
            <p className="lead" style={{ marginBottom: 18 }}>
              We recruit coachable, ambitious people from outside the usual sales talent pools.
              We train them with daily live reps, mentorship, and accountability —
              the same cadence a top startup runs.
            </p>
            <p className="lead" style={{ marginBottom: 28 }}>
              Whether you see yourself as a closer, an account executive, a recruiter,
              or a future sales director — Alora is the floor where that career gets built.
            </p>
            <div style={{ display: "flex", gap: 12 }}>
              <a className="btn btn-primary" href={APPLY_MAILTO}>Apply to join the floor</a>
              <a className="btn btn-link" href="#leaders">Meet the team →</a>
            </div>
          </div>
        </div>

        {/* Stat band */}
        <div className="stat-band">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
            {stats.map((s, i) => (
              <div key={s.k} style={{ paddingLeft: i === 0 ? 0 : 24, borderLeft: i === 0 ? "none" : "1px solid var(--color-hairline)" }}>
                <div style={{
                  fontFamily: "var(--font-display)",
                  fontWeight: 600,
                  fontSize: 64,
                  lineHeight: 1,
                  letterSpacing: "-0.035em",
                  color: "var(--color-ink)",
                  marginBottom: 10,
                }}>
                  <AnimatedStat value={s.v} />
                </div>
                <div style={{ fontSize: 14, color: "var(--color-muted)", fontWeight: 500 }}>{s.k}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   TopLeaders — team grid (Arcera-style) with image-slot photos + fun facts
   ============================================================ */
function TopLeaders() {
  const sectionRef = React.useRef(null);
  const [inView, setInView] = React.useState(false);

  React.useEffect(() => {
    if (!sectionRef.current) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setInView(true);
          obs.disconnect();
        }
      });
    }, { threshold: 0.15 });
    obs.observe(sectionRef.current);
    return () => obs.disconnect();
  }, []);

  const team = [
    { name: "Simran Kour",        role: "Managing Director",   fact: "Studied finance & economics at U of T. Can name almost every capital city in the world.", initials: "SK", color: "#fb923c", photo: "photos/leader-simran.jpg",  pos: "50% 25%" },
    { name: "Erik Litmola",       role: "Sales Training Director",  fact: "Moved from Guyana at 17 by herself. Dream car: an R8.",                                       initials: "EL", color: "#ec4899", photo: "photos/leader-erik.jpg",  pos: "50% 25%" },
    { name: "Julia Czesak",       role: "Sales Training Director",  fact: "Played professional soccer in Germany, for FC Lehrte.",                                       initials: "JC", color: "#8b5cf6", photo: "photos/leader-julia.jpg",  pos: "68% 30%" },
    { name: "Michael Zeb Sieber", role: "Sales Training Director",  fact: "Has a golden retriever with three legs. Played competitive volleyball for 12 years.",         initials: "MS", color: "#34d399", photo: "photos/leader-michael.jpg",  pos: "50% 25%" },
  ];

  return (
    <section id="leaders" ref={sectionRef} className={`section ${inView ? "leaders-in" : ""}`} style={{ background: "var(--color-canvas)" }}>
      <div className="container-wide">
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 48, flexWrap: "wrap", gap: 24 }}>
          <div style={{ maxWidth: 680 }}>
            <span className="eyebrow" style={{ marginBottom: 16, display: "block" }}>Top leaders</span>
            <h2 className="reveal" style={{ fontSize: 56, lineHeight: 1.05, letterSpacing: "-0.03em", marginBottom: 16, textWrap: "balance" }}>
              The people who built the floor.
            </h2>
          </div>
          <a className="btn btn-secondary" href={APPLY_MAILTO}>See open roles →</a>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          {team.map((m, i) => (
            <article key={m.name} className="team-card">
              <div className="photo-wrap">
                <image-slot
                  id={`leader-${i}`}
                  shape="rect"
                  src={m.photo}
                  position={m.pos}
                  placeholder={`${m.name} · photo`}
                  style={{ width: "100%", height: "100%", display: "block" }}
                ></image-slot>
              </div>
              <div className="overlay">
                <div className="role">{m.role}</div>
                <div className="name">{m.name}</div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Social — Instagram-led social presence (replaces TopPerformers)
   ============================================================ */
function Social() {
  const posts = [
    { id: "ig-1", caption: "Q2 cohort kickoff — first floor day.",        likes: "1,284", tag: "#aloracohort" },
    { id: "ig-2", caption: "Friday floor close. New top closer crowned.", likes: "982",   tag: "#topcloser" },
    { id: "ig-3", caption: "Quarterly trip — Bahamas \u2197.",            likes: "2,103", tag: "#aloratravels" },
  ];

  return (
    <section id="social" className="section" style={{ background: "var(--color-surface-soft)" }}>
      <div className="container-wide">
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 48, flexWrap: "wrap", gap: 24 }}>
          <div style={{ maxWidth: 680 }}>
            <span className="eyebrow" style={{ marginBottom: 16, display: "block" }}>Follow the floor</span>
            <h2 className="reveal" style={{ fontSize: 56, lineHeight: 1.05, letterSpacing: "-0.03em", marginBottom: 16, textWrap: "balance" }}>
              Every day on the floor, on Instagram.
            </h2>
            <p className="lead" style={{ maxWidth: 560 }}>
              Top closes, cohort kickoffs, mentorship moments, and every quarterly trip.
              Follow <a href="https://instagram.com/alorainc" style={{ color: "var(--color-ink)", fontWeight: 600, textDecoration: "underline", textUnderlineOffset: 3 }}>@alorainc</a> to see what a real sales floor looks like.
            </p>
          </div>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <a className="btn btn-primary" href="https://instagram.com/alorainc" target="_blank" rel="noopener">Follow on Instagram →</a>
            <a className="btn btn-secondary" href="#contact">All channels</a>
          </div>
        </div>

        {/* Profile bar */}
        <div className="card-product" style={{ background: "var(--color-canvas)", padding: 22, marginBottom: 16, display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap" }}>
          <div style={{
            width: 56, height: 56, borderRadius: "50%",
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            background: "var(--color-ink)", color: "#fff",
            fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 22,
            letterSpacing: "-0.02em",
          }}>a</div>
          <div style={{ flex: 1, minWidth: 200 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ fontWeight: 600, fontSize: 16, color: "var(--color-ink)" }}>@alorainc</span>
              <span className="badge dot" style={{ fontSize: 12 }}>Posting weekly</span>
            </div>
            <div style={{ fontSize: 13, color: "var(--color-muted)", marginTop: 4 }}>
              Recruiting & training the next generation of sales leaders. Toronto, Canada.
            </div>
          </div>
          <div style={{ display: "flex", gap: 28 }}>
            {[
              { v: "248",  k: "Posts"     },
              { v: "12.4k", k: "Followers" },
              { v: "94%",  k: "Engagement" },
            ].map((s) => (
              <div key={s.k} style={{ textAlign: "center" }}>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 22, letterSpacing: "-0.02em", color: "var(--color-ink)", lineHeight: 1 }}>{s.v}</div>
                <div style={{ fontSize: 11, color: "var(--color-muted)", marginTop: 4, letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 600 }}>{s.k}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Post grid — 3x1 */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {posts.map((p) => (
            <article key={p.id} style={{
              position: "relative",
              borderRadius: "var(--radius-lg)",
              overflow: "hidden",
              background: "var(--color-canvas)",
              border: "1px solid var(--color-hairline)",
              boxShadow: "var(--shadow-soft)",
              display: "flex", flexDirection: "column",
            }}>
              <div style={{ position: "relative", aspectRatio: "1 / 1", background: "var(--color-surface-card)" }}>
                <image-slot
                  id={p.id}
                  shape="rect"
                  placeholder={`Instagram post · ${p.tag}`}
                  style={{ width: "100%", height: "100%", display: "block" }}
                ></image-slot>
                {/* corner glyph */}
                <div style={{
                  position: "absolute", top: 12, right: 12,
                  width: 28, height: 28, borderRadius: 8,
                  background: "rgba(255,255,255,0.95)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  fontSize: 13, color: "var(--color-ink)",
                  boxShadow: "var(--shadow-soft)",
                }}>◧</div>
              </div>
              <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 10 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 14, fontSize: 13, color: "var(--color-body)" }}>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                    <span style={{ color: "var(--color-ink)" }}>♡</span>
                    <span className="mono">{p.likes}</span>
                  </span>
                  <span style={{ color: "var(--color-muted)" }} className="mono">{p.tag}</span>
                </div>
                <p style={{ fontSize: 14, lineHeight: 1.5, color: "var(--color-ink)", margin: 0 }}>{p.caption}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* legacy TopPerformers — kept for reference, unused */
function TopPerformers() {
  const rows = [
    { rank: 1, name: "Sahil Wahidi",     pct: 184, mrr: "$58.2k", deals: 14, c: "#fb923c", i: "SW" },
    { rank: 2, name: "Ryan Samra",       pct: 156, mrr: "$44.7k", deals: 11, c: "#ec4899", i: "RS" },
    { rank: 3, name: "Aneisa Roshan",    pct: 142, mrr: "$38.4k", deals: 10, c: "#8b5cf6", i: "AR" },
    { rank: 4, name: "Meena Sharifi",    pct: 128, mrr: "$31.1k", deals:  9, c: "#34d399", i: "MS" },
    { rank: 5, name: "Labib Sahriar",    pct: 116, mrr: "$27.6k", deals:  8, c: "#fb923c", i: "LS" },
    { rank: 6, name: "Arvin Hadi",       pct: 104, mrr: "$24.2k", deals:  7, c: "#ec4899", i: "AH" },
  ];

  return (
    <section id="performers" className="section" style={{ background: "var(--color-surface-soft)" }}>
      <div className="container-wide">
        <div style={{ textAlign: "center", marginBottom: 40 }}>
          <span className="eyebrow" style={{ marginBottom: 16, display: "block" }}>Top performers of the week</span>
          <h2 style={{ fontSize: 56, lineHeight: 1.05, letterSpacing: "-0.03em", marginBottom: 14, textWrap: "balance" }}>
            The floor is competitive on purpose.
          </h2>
          <p className="lead" style={{ maxWidth: 580, margin: "0 auto" }}>
            Every Monday, the board resets. Every Friday, the top closer takes the floor.
          </p>
        </div>

        <div className="card-product" style={{ maxWidth: 1040, margin: "0 auto", padding: 32, background: "var(--color-canvas)" }}>
          {/* header */}
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 24, borderBottom: "1px solid var(--color-hairline-soft)", paddingBottom: 18 }}>
            <div>
              <h3 style={{ fontSize: 22, letterSpacing: "-0.015em", marginBottom: 4 }}>Week 21 leaderboard</h3>
              <span style={{ fontSize: 13, color: "var(--color-muted)" }}>May 20 – May 24, 2026 · Q2 cohort</span>
            </div>
            <div style={{ display: "flex", gap: 8 }}>
              <span className="badge outline mono" style={{ fontSize: 12 }}>↑ +18% week over week</span>
              <span className="badge dot mono" style={{ fontSize: 12 }}>Live</span>
            </div>
          </div>

          {/* column headers */}
          <div style={{ display: "grid", gridTemplateColumns: "40px 44px 1fr 1fr 90px 90px", gap: 14, padding: "0 4px 12px", borderBottom: "1px solid var(--color-hairline-soft)" }}>
            {["#", "", "Rep", "Quota attainment", "Deals", "Commission"].map((h, i) => (
              <span key={i} className="eyebrow" style={{ fontSize: 11, textAlign: i >= 4 ? "right" : "left" }}>{h}</span>
            ))}
          </div>

          {/* rows */}
          <div>
            {rows.map((r) => (
              <div key={r.name} style={{
                display: "grid",
                gridTemplateColumns: "40px 44px 1fr 1fr 90px 90px",
                gap: 14,
                alignItems: "center",
                padding: "16px 4px",
                borderBottom: "1px solid var(--color-hairline-soft)",
              }}>
                <span style={{
                  fontFamily: "var(--font-mono)",
                  fontWeight: 600,
                  color: r.rank === 1 ? "var(--color-ink)" : "var(--color-muted)",
                  fontSize: 14,
                  display: "inline-flex", alignItems: "center", gap: 4,
                }}>
                  {r.rank === 1 && <span style={{ color: "var(--color-ink)" }}>▲</span>}
                  #{r.rank}
                </span>
                <div className="avatar" style={{ background: r.c, width: 36, height: 36, fontSize: 13 }}>{r.i}</div>
                <span style={{ fontWeight: 600, color: "var(--color-ink)", fontSize: 15 }}>{r.name}</span>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <div style={{ flex: 1, height: 8, background: "var(--color-surface-card)", borderRadius: 999, overflow: "hidden" }}>
                    <div style={{ width: `${Math.min(r.pct / 2, 100)}%`, height: "100%", background: r.pct >= 150 ? "var(--color-success)" : "var(--color-ink)" }}></div>
                  </div>
                  <span className="mono" style={{ fontSize: 13, color: "var(--color-body)", minWidth: 44, textAlign: "right" }}>{r.pct}%</span>
                </div>
                <span className="mono" style={{ fontSize: 13, color: "var(--color-body)", textAlign: "right" }}>{r.deals}</span>
                <span className="mono" style={{ fontSize: 13, color: "var(--color-ink)", fontWeight: 600, textAlign: "right" }}>{r.mrr}</span>
              </div>
            ))}
          </div>

          {/* footer */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 18, marginTop: 4 }}>
            <span style={{ fontSize: 13, color: "var(--color-muted)" }}>Updated 4 minutes ago · auto-refreshing</span>
            <button className="btn-link">Open the floor board →</button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Travel — quarterly performance trips (Arcera-style)
   ============================================================ */
function Travel() {
  const trips = [
    { place: "Bahamas",   yr: "", id: "trip-bahamas",   photo: "photos/travel-bahamas.jpg" },
    { place: "Cancún",    yr: "", id: "trip-cancun",    photo: "photos/travel-cancun.jpg" },
    { place: "Rome",      yr: "", id: "trip-lisbon",    photo: "photos/travel-rome.jpg" },
    { place: "Vancouver", yr: "", id: "trip-tremblant", photo: "photos/travel-vancouver.jpg" },
    { place: "Toronto",   yr: "", id: "trip-vegas",     photo: "photos/travel-toronto.jpg" },
  ];
  return (
    <section className="section">
      <div className="container-wide">
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 40, flexWrap: "wrap", gap: 24 }}>
          <div>
            <span className="eyebrow" style={{ marginBottom: 16, display: "block" }}>Performance trips</span>
            <h2 className="reveal" style={{ fontSize: 56, lineHeight: 1.05, letterSpacing: "-0.03em", textWrap: "balance" }}>
              We've travelled around the world.
            </h2>
          </div>
          <p style={{ fontSize: 16, color: "var(--color-body)", maxWidth: 380 }}>
            Top performers earn the trip. Hit your numbers, and you fly with the floor — destinations on us.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gridTemplateRows: "240px 240px", gap: 16 }}>
          {/* Large feature trip */}
          <div style={{
            gridRow: "span 2",
            position: "relative",
            borderRadius: "var(--radius-lg)", overflow: "hidden",
            background: "var(--color-surface-card)",
          }}>
            <image-slot
              id={trips[0].id}
              shape="rect"
              src={trips[0].photo}
              placeholder={`${trips[0].place} · landscape photo`}
              style={{ width: "100%", height: "100%", display: "block" }}
            ></image-slot>
            <div style={{
              position: "absolute", inset: 0,
              background: "linear-gradient(180deg, rgba(17,17,17,0) 40%, rgba(17,17,17,0.7) 100%)",
              pointerEvents: "none",
            }}></div>
            <div style={{ position: "absolute", left: 24, bottom: 24, color: "#fff" }}>
              {trips[0].yr && (
                <span className="mono" style={{ fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(255,255,255,0.85)" }}>
                  {trips[0].yr}
                </span>
              )}
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 44, letterSpacing: "-0.025em", lineHeight: 1 }}>
                {trips[0].place}
              </div>
            </div>
          </div>

          {trips.slice(1).map((t) => (
            <div key={t.id} style={{
              position: "relative",
              borderRadius: "var(--radius-lg)", overflow: "hidden",
              background: "var(--color-surface-card)",
            }}>
              <image-slot
                id={t.id}
                shape="rect"
                src={t.photo || undefined}
                placeholder={`${t.place} · photo`}
                style={{ width: "100%", height: "100%", display: "block" }}
              ></image-slot>
              <div style={{
                position: "absolute", inset: 0,
                background: "linear-gradient(180deg, rgba(17,17,17,0) 40%, rgba(17,17,17,0.75) 100%)",
                pointerEvents: "none",
              }}></div>
              <div style={{ position: "absolute", left: 18, bottom: 16, color: "#fff" }}>
                {t.yr && (
                  <span className="mono" style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(255,255,255,0.85)" }}>
                    {t.yr}
                  </span>
                )}
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 26, letterSpacing: "-0.02em", lineHeight: 1.05 }}>
                  {t.place}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   ApplyCta — dark CTA band
   ============================================================ */
function ApplyCta() {
  return (
    <section id="apply" style={{ paddingBottom: 96 }}>
      <div className="container-wide">
        <div style={{
          background: "var(--color-surface-dark)",
          color: "var(--color-on-dark)",
          borderRadius: "var(--radius-xl)",
          padding: "80px 56px",
          position: "relative",
          overflow: "hidden",
        }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "center" }}>
            <div>
              <span className="eyebrow on-dark" style={{ marginBottom: 16, display: "block" }}>Apply now</span>
              <h2 className="reveal" style={{ color: "var(--color-on-dark)", fontSize: 60, lineHeight: 1.02, letterSpacing: "-0.035em", marginBottom: 20, textWrap: "balance" }}>
                Ambition gets the seat. Coaching does the rest.
              </h2>
              <p style={{ fontSize: 18, color: "var(--color-on-dark-soft)", lineHeight: 1.55, maxWidth: 520, marginBottom: 32 }}>
                Independent field sales contract. Door-to-door in the Calgary market. No sales background required — we hire for hunger and coachability.
              </p>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <a className="btn btn-on-dark btn-lg" href={APPLY_MAILTO}>Start your application →</a>
                <a className="btn btn-ghost-on-dark btn-lg" href={CONTACT_MAILTO}>Talk to a recruiter</a>
              </div>
            </div>

            {/* Right: application card preview */}
            <div style={{
              background: "var(--color-surface-dark-elev)",
              borderRadius: 14,
              padding: 24,
              border: "1px solid rgba(255,255,255,0.08)",
            }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
                <span className="mono" style={{ fontSize: 12, color: "var(--color-on-dark-soft)" }}>application · step 1 / 3</span>
                <span className="badge dot" style={{ background: "rgba(255,255,255,0.08)", color: "var(--color-on-dark)" }}>5 min</span>
              </div>
              {[
                { l: "Full name",        v: "" },
                { l: "Email",            v: "" },
                { l: "Why sales? Why now?", v: "", multi: true },
              ].map((f) => (
                <div key={f.l} style={{ marginBottom: 14 }}>
                  <label style={{ fontSize: 12, color: "var(--color-on-dark-soft)", marginBottom: 6, display: "block", letterSpacing: "0.04em", textTransform: "uppercase", fontWeight: 600 }}>{f.l}</label>
                  <div style={{
                    height: f.multi ? 80 : 42,
                    borderRadius: 8,
                    background: "rgba(255,255,255,0.04)",
                    border: "1px solid rgba(255,255,255,0.12)",
                  }}></div>
                </div>
              ))}
              <button className="btn btn-on-dark" style={{ width: "100%", marginTop: 6 }}>Continue →</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Footer — dark, with contact info (Arcera-style)
   ============================================================ */
function Footer() {
  return (
    <footer className="footer" id="contact">
      <div className="container-wide">
        {/* big closer */}
        <div style={{ marginBottom: 64, maxWidth: 780 }}>
          <h2 className="reveal" style={{ color: "var(--color-on-dark)", fontSize: 64, lineHeight: 1, letterSpacing: "-0.035em", textWrap: "balance" }}>
            We help companies grow their customer base and outperform the competition.
          </h2>
        </div>

        {/* contact bar */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 32, marginBottom: 64, paddingBottom: 56, borderBottom: "1px solid var(--color-surface-dark-elev)" }}>
          {[
            { glyph: "◉", label: "Office",    value: "6020 2 St SE #27, Calgary, AB T2H 2L8" },
            { glyph: "@", label: "Careers",   value: "Careers@alora.ca" },
          ].map((c) => (
            <div key={c.label} style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
              <div style={{
                width: 40, height: 40, borderRadius: 10,
                background: "var(--color-surface-dark-elev)",
                color: "var(--color-on-dark)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontSize: 16, flex: "none",
              }}>{c.glyph}</div>
              <div>
                <div className="eyebrow on-dark" style={{ marginBottom: 6 }}>{c.label}</div>
                <div style={{ color: "var(--color-on-dark)", fontSize: 15, fontWeight: 500, lineHeight: 1.4 }}>{c.value}</div>
              </div>
            </div>
          ))}
        </div>

        {/* brand + socials */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 32 }}>
          <div>
            <a href="#top" className="brand">
              <img src="design-system/assets/alora-mark-color.png" width="40" height="40" alt="Alora" style={{ display: "block" }} />
              Alora
            </a>
            <p style={{ fontSize: 14, color: "var(--color-on-dark-soft)", marginTop: 16, maxWidth: 360, lineHeight: 1.6 }}>
              Recruiting and training the next generation of sales leaders.
              Calgary, Alberta.
            </p>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            {[
              { l: "IG", h: "https://instagram.com" },
              { l: "in", h: "#" },
              { l: "X",  h: "#" },
              { l: "YT", h: "#" },
            ].map((s) => (
              <a key={s.l} href={s.h} style={{
                width: 40, height: 40, borderRadius: "50%",
                background: "var(--color-surface-dark-elev)",
                color: "var(--color-on-dark)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontFamily: "var(--font-body)", fontSize: 12, fontWeight: 600,
              }}>{s.l}</a>
            ))}
          </div>
        </div>

        <div className="bottom">
          <span>© 2026 Alora Inc · All rights reserved</span>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Security</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* expose to window for the page entry point */
Object.assign(window, { TopNav, Hero, Pillars, AnimatedStat, Mission, TopLeaders, Social, TopPerformers, Travel, ApplyCta, Footer });