/* ============================================================
   Page sections for the App hub landing page.
   Each reads tweaks via props. Exposed on window.
   ============================================================ */

const LINKS = {
  courseMember: "https://members.thescholarshipsystem.com/",
  courseApple:  "https://apps.apple.com/us/app/the-scholarship-system/id6764689963",
  coursePlay:   "https://play.google.com/store/apps/details?id=com.thescholarshipsystem.members&hl=en",
  trackerApple: "https://apps.apple.com/us/app/scholarship-tracker-by-tss/id1102967717",
  trackerPlay:  "https://play.google.com/store/apps/details?id=com.www.thescholarshipsystem&hl=en",
  trackerChrome:"https://chromewebstore.google.com/detail/the-scholarship-system/kdhfhegimikbpmpnmkcdbmeijhgifodc?hl=en-US&pli=1",
  trackerWeb:   "https://app.thescholarshipsystem.com/",
  webinar:      "https://thescholarshipsystem.com/webclass?utm_source=app-page&utm_medium=button&utm_campaign=organic",
};

/* ----------------------------- NAV ----------------------------- */
const NAV_ITEMS = [
  ["#apps", "The two apps"],
  ["#tracker-how-to", "Using the Tracker"],
  ["#course-app", "Course app"],
  ["#webinar", "Free webinar"],
];

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    on(); window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  React.useEffect(() => { setMenuOpen(false); }, []);
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 40,
      background: scrolled || menuOpen ? "rgba(255,255,255,0.96)" : "rgba(255,255,255,0.6)",
      backdropFilter: "blur(10px)",
      borderBottom: "1px solid " + (scrolled || menuOpen ? "var(--tss-border)" : "transparent"),
      transition: "background 200ms, border-color 200ms",
    }}>
      <div className="wrap" style={{ height: 72, display: "flex", alignItems: "center", gap: 30 }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", textDecoration: "none" }}>
          <img src="assets/logo-primary.png" alt="The Scholarship System" style={{ height: 50, width: "auto" }} />
        </a>
        <nav className="nav-links" style={{ display: "flex", gap: 24, marginLeft: 6 }}>
          {NAV_ITEMS.map(([href, label]) => <a key={href} className="nav-link" href={href}>{label}</a>)}
        </nav>
        <div className="nav-actions" style={{ marginLeft: "auto", display: "flex", gap: 14, alignItems: "center" }}>
          <a className="nav-link" href={LINKS.courseMember} target="_blank" rel="noopener noreferrer"
             style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--tss-forest)" }}>
            <Ic name="lock" size={15} /> <span className="nav-cta-text">Member login</span>
          </a>
          <a className="tss-btn tss-btn--cta" href={LINKS.webinar} target="_blank" rel="noopener noreferrer">
            <Ic name="play" size={14} sw={2.2} /> <span className="nav-cta-text">Free webinar</span>
          </a>
        </div>
        <button type="button" className="nav-burger" aria-label={menuOpen ? "Close menu" : "Open menu"} aria-expanded={menuOpen}
          onClick={() => setMenuOpen((v) => !v)}
          style={{ marginLeft: "auto", display: "none", background: "none", border: "none", padding: 8, cursor: "pointer", color: "var(--tss-pine)" }}>
          <Ic name={menuOpen ? "x" : "menu"} size={26} sw={2} />
        </button>
      </div>
      {menuOpen && (
        <div className="nav-mobile-panel">
          <nav style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {NAV_ITEMS.map(([href, label]) => (
              <a key={href} className="nav-link nav-link--mobile" href={href} onClick={() => setMenuOpen(false)}>{label}</a>
            ))}
          </nav>
          <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 18 }}>
            <a className="nav-link" href={LINKS.courseMember} target="_blank" rel="noopener noreferrer"
               style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--tss-forest)", fontSize: 16 }}>
              <Ic name="lock" size={16} /> Member login
            </a>
            <a className="tss-btn tss-btn--cta" href={LINKS.webinar} target="_blank" rel="noopener noreferrer" style={{ width: "100%", justifyContent: "center" }}>
              <Ic name="play" size={14} sw={2.2} /> Free webinar
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

/* ------------------------ HERO HELPERS ------------------------ */
function ComingBadge({ style }) {
  return (
    <div style={{
      position: "absolute", zIndex: 6, display: "inline-flex", alignItems: "center", gap: 9,
      background: "var(--tss-sand)", color: "var(--tss-pine)",
      fontFamily: "var(--tss-font-heading)", fontWeight: 800, fontSize: 13, letterSpacing: "0.1em",
      textTransform: "uppercase", padding: "10px 16px", borderRadius: 999,
      boxShadow: "0 14px 30px rgba(29,51,39,0.28)", ...style,
    }}>
      <Ic name="sparkles" size={15} sw={2} /> Just launched
    </div>
  );
}

function HeroPhones({ big = false }) {
  const w = big ? 244 : 224;
  return (
    <div style={{ position: "relative", display: "flex", justifyContent: "center" }}>
      {/* accent halo */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: "-8% -4%", zIndex: 0,
        background: "radial-gradient(45% 50% at 52% 42%, rgba(14,102,79,0.18), transparent 70%)",
        filter: "blur(6px)",
      }} />
      <div style={{ position: "relative", zIndex: 1, paddingBottom: 26 }}>
        <div style={{ position: "relative", transform: "rotate(-4deg)", marginRight: -38 }}>
          <PhoneFrame w={w - 26} id="hero-course-2" placeholder="Course app screenshot" />
        </div>
        <div style={{ position: "absolute", left: 96, top: 30, transform: "rotate(4deg)", filter: "drop-shadow(0 34px 46px rgba(29,51,39,0.30))" }}>
          <PhoneFrame w={w} id="hero-course-1" placeholder="Course app — home screen" />
          <ComingBadge style={{ top: -16, right: -22 }} />
        </div>
      </div>
    </div>
  );
}

/* ----------------------------- HERO ----------------------------- */
function Hero({ t }) {
  const vibe = t.vibe;
  const dark = vibe === "pine";
  const bg = vibe === "pine"
    ? "linear-gradient(158deg, #20392b 0%, #0c1611 86%)"
    : vibe === "warm"
      ? "var(--tss-sand-50)"
      : "radial-gradient(125% 95% at 82% -6%, var(--tss-sand-100) 0%, #ffffff 56%)";
  const ink = dark ? "#fff" : "var(--tss-pine)";
  const bodyInk = dark ? "rgba(255,255,255,0.84)" : "var(--tss-fg)";
  const accentInk = dark ? "var(--tss-sand)" : t.accent;
  const eyebrowInk = dark ? "var(--tss-sand)" : "var(--tss-forest)";
  const centered = t.heroLayout === "centered";

  const copy = (
    <div style={{ maxWidth: centered ? 760 : 560, margin: centered ? "0 auto" : 0, textAlign: centered ? "center" : "left" }}>
      <div className="chip chip--now chip--pulse" style={{ color: "#fff" }}>
        <Ic name="sparkles" size={14} sw={2} /> New · The member app is here
      </div>
      <h1 style={{
        fontFamily: "var(--tss-font-heading)", fontWeight: 800,
        fontSize: "clamp(40px, 5vw, 62px)", lineHeight: 1.04, letterSpacing: "-0.02em",
        color: ink, margin: "18px 0 16px", textWrap: "balance",
      }}>
        The Scholarship System app is{" "}
        <span style={{ color: accentInk }}>here</span>.
      </h1>
      <p style={{
        fontFamily: "var(--tss-font-accent)", fontStyle: "italic", fontWeight: 400,
        fontSize: "clamp(20px, 2.2vw, 24px)", lineHeight: 1.4,
        color: dark ? "var(--tss-sand)" : "var(--tss-forest-800)",
        margin: "0 0 16px", maxWidth: 560, marginLeft: centered ? "auto" : 0, marginRight: centered ? "auto" : 0,
      }}>
        Our new member course app is now available.
      </p>
      <p style={{
        fontFamily: "var(--tss-font-body)", fontSize: 17.5, lineHeight: 1.62,
        color: bodyInk, margin: "0 0 26px", maxWidth: 540,
        marginLeft: centered ? "auto" : 0, marginRight: centered ? "auto" : 0,
      }}>
        Members can download the new course app and keep using the <strong>Scholarship Tracker app</strong> and
        course portal below. New families can learn the system through our free webinar.
      </p>
      <div className="btn-row" style={{ justifyContent: centered ? "center" : "flex-start" }}>
        <a className="tss-btn tss-btn--cta tss-btn--lg" href="#course-app">
          <Ic name="graduation-cap" size={17} sw={2} /> Access the course
        </a>
        <a className="tss-btn tss-btn--outline tss-btn--lg" href="#tracker-how-to"
           style={dark ? { background: "transparent", color: "#fff", borderColor: "rgba(255,255,255,0.5)" } : null}>
          Open Scholarship Tracker
        </a>
        <a href={LINKS.webinar} target="_blank" rel="noopener noreferrer"
           style={{ display: "inline-flex", alignItems: "center", gap: 9, fontFamily: "var(--tss-font-heading)", fontWeight: 700, fontSize: 15.5, color: accentInk, textDecoration: "none", padding: "8px 6px" }}>
          <span style={{ width: 34, height: 34, borderRadius: 999, background: dark ? "rgba(217,198,171,0.18)" : "var(--tss-forest-100)", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <Ic name="play" size={14} sw={2} color={accentInk} />
          </span>
          Watch free webinar
        </a>
      </div>
      <div style={{ display: "flex", gap: 18, marginTop: 26, flexWrap: "wrap", alignItems: "center", justifyContent: centered ? "center" : "flex-start", fontFamily: "var(--tss-font-body)", fontSize: 13.5, color: dark ? "var(--tss-sand-300)" : "var(--tss-fg-muted)" }}>
        <span style={{ color: dark ? "var(--tss-sand)" : "var(--tss-forest)" }}>★★★★★ 4.9 / 5</span>
        <span style={{ opacity: 0.5 }}>•</span>
        <span>10,000+ families enrolled</span>
        <span style={{ opacity: 0.5 }}>•</span>
        <span>Since 2014</span>
      </div>
    </div>
  );

  return (
    <section id="top" style={{ background: bg, color: ink, padding: centered ? "64px 0 76px" : "56px 0 84px", overflow: "hidden", position: "relative" }}>
      <div className="wrap">
        {centered ? (
          <div style={{ display: "grid", gap: 44 }}>
            {copy}
            <HeroPhones big />
          </div>
        ) : (
          <div className="hero-grid">
            {copy}
            <HeroPhones big={t.heroLayout === "showcase"} />
          </div>
        )}
      </div>
    </section>
  );
}

/* ----------------------- WHICH APP — cards ----------------------- */
function AppCard({ kind }) {
  const isCourse = kind === "course";
  const accent = isCourse ? "var(--tss-forest)" : "var(--tss-pine)";
  const phoneId = isCourse ? "whichapp-course" : "whichapp-tracker";
  return (
    <div id={isCourse ? "course" : "tracker"} style={{
      background: "#fff", border: "1px solid var(--tss-border)", borderRadius: 20,
      boxShadow: "var(--tss-shadow-sm)", overflow: "hidden", display: "flex", flexDirection: "column",
    }}>
      {/* header band */}
      <div style={{
        position: "relative", padding: "26px 28px 0",
        background: isCourse
          ? "linear-gradient(165deg, var(--tss-forest-50), #fff)"
          : "linear-gradient(165deg, var(--tss-sand-100), #fff)",
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 8 }}>
              <span style={{ width: 46, height: 46, borderRadius: 13, background: accent, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "var(--tss-shadow-sm)" }}>
                <Ic name={isCourse ? "graduation-cap" : "list-checks"} size={24} />
              </span>
              <div>
                <div style={{ fontFamily: "var(--tss-font-heading)", fontWeight: 700, fontSize: 21, color: "var(--tss-pine)", lineHeight: 1.1 }}>
                  {isCourse ? "The Scholarship System" : "Scholarship Tracker"}
                </div>
                <div style={{ fontFamily: "var(--tss-font-body)", fontSize: 13.5, color: "var(--tss-fg-muted)" }}>
                  {isCourse ? "Member course app" : "By TSS · the toolkit"}
                </div>
              </div>
            </div>
          </div>
          <span className={"chip chip--now" + (isCourse ? " chip--pulse" : " chip--pulse")}>
            {isCourse ? "New · Available now" : "Available now"}
          </span>
        </div>
      </div>

      {/* body */}
      <div className="appcard-body" style={{ padding: "8px 28px 28px" }}>
        <div style={{ display: "flex", justifyContent: "center", paddingTop: 14 }}>
          <PhoneFrame w={132} id={phoneId} island={false}
            placeholder={isCourse ? "Course app screen" : "Tracker app screen"} />
        </div>
        <div>
          <div style={{ fontFamily: "var(--tss-font-heading)", fontWeight: 700, fontSize: 12.5, letterSpacing: "0.12em", textTransform: "uppercase", color: accent, marginBottom: 12 }}>
            Best for
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 13 }}>
            {(isCourse
              ? ["Course lessons", "Scholarship training", "Member resources", "Progress tracking"]
              : ["Tracking scholarships", "Managing deadlines", "Organizing applications", "Monitoring progress"]
            ).map((x) => <CheckItem key={x} tone={isCourse ? "forest" : "sand"}>{x}</CheckItem>)}
          </div>
        </div>
      </div>

      {/* footer actions */}
      <div style={{ marginTop: "auto", padding: "20px 28px 26px", borderTop: "1px solid var(--tss-border)", background: "var(--tss-sand-50)" }}>
        {isCourse ? (
          <>
            <a className="tss-btn tss-btn--primary tss-btn--lg" href={LINKS.courseMember} target="_blank" rel="noopener noreferrer" style={{ width: "100%" }}>
              <Ic name="lock" size={17} sw={2} /> Member login
            </a>
            <div style={{ display: "flex", gap: 10, marginTop: 14, flexWrap: "wrap" }}>
              <StoreBadge store="apple" href={LINKS.courseApple} size={18} />
              <StoreBadge store="google" href={LINKS.coursePlay} size={18} />
            </div>
            <div style={{ fontFamily: "var(--tss-font-body)", fontSize: 12.5, color: "var(--tss-fg-subtle)", marginTop: 10 }}>
              Now live on the App Store and Google Play — or sign in to the member portal.
            </div>
          </>
        ) : (
          <>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
              <StoreBadge store="apple" href={LINKS.trackerApple} size={18} />
              <StoreBadge store="google" href={LINKS.trackerPlay} size={18} />
            </div>
            <a href={LINKS.trackerChrome} target="_blank" rel="noopener noreferrer"
               style={{ display: "inline-flex", alignItems: "center", gap: 9, marginTop: 14, fontFamily: "var(--tss-font-heading)", fontWeight: 700, fontSize: 14.5, color: "var(--tss-forest)", textDecoration: "none" }}>
              <ChromeGlyph s={18} /> Also on the Chrome Web Store
              <Ic name="arrow-right" size={16} sw={2.2} />
            </a>
          </>
        )}
      </div>
    </div>
  );
}

function SplitPane({ kind }) {
  const isCourse = kind === "course";
  return (
    <div id={isCourse ? "course" : "tracker"} className="split-pane" style={{
      background: isCourse ? "linear-gradient(165deg, var(--tss-forest-50), #fff)" : "linear-gradient(165deg, var(--tss-sand-100), #fff)",
      display: "grid", gap: 18,
    }}>
      <span className={"chip chip--now"} style={{ justifySelf: "start" }}>
        {isCourse ? "New · Available now" : "Available now"}
      </span>
      <div style={{ display: "flex", alignItems: "center", gap: 13 }}>
        <span style={{ width: 50, height: 50, borderRadius: 14, background: isCourse ? "var(--tss-forest)" : "var(--tss-pine)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <Ic name={isCourse ? "graduation-cap" : "list-checks"} size={26} />
        </span>
        <div style={{ fontFamily: "var(--tss-font-heading)", fontWeight: 700, fontSize: 24, color: "var(--tss-pine)" }}>
          {isCourse ? "The Scholarship System" : "Scholarship Tracker"}
        </div>
      </div>
      <p style={{ fontFamily: "var(--tss-font-body)", fontSize: 16, lineHeight: 1.6, color: "var(--tss-fg-muted)", margin: 0 }}>
        {isCourse
          ? "The member course app — lessons, training, and resources for families who've joined the system."
          : "The free toolkit members and students use to track scholarships, deadlines, and applications."}
      </p>
      <div style={{ display: "flex", flexDirection: "column", gap: 11, marginTop: 2 }}>
        {(isCourse
          ? ["Course lessons", "Scholarship training", "Member resources", "Progress tracking"]
          : ["Tracking scholarships", "Managing deadlines", "Organizing applications", "Monitoring progress"]
        ).map((x) => <CheckItem key={x} tone={isCourse ? "forest" : "sand"}>{x}</CheckItem>)}
      </div>
      {isCourse ? (
        <a className="tss-btn tss-btn--primary tss-btn--lg" href={LINKS.courseMember} target="_blank" rel="noopener noreferrer" style={{ justifySelf: "start", marginTop: 6 }}>
          <Ic name="lock" size={16} sw={2} /> Member login
        </a>
      ) : (
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 6 }}>
          <StoreBadge store="apple" href={LINKS.trackerApple} size={18} />
          <StoreBadge store="google" href={LINKS.trackerPlay} size={18} />
        </div>
      )}
    </div>
  );
}

function WhichApp({ t }) {
  return (
    <section id="apps" style={{ background: "#fff", padding: "92px 0" }}>
      <div className="wrap">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
          <div className="tss-eyebrow">Which app do you need?</div>
          <h2 style={{ fontFamily: "var(--tss-font-heading)", fontWeight: 700, fontSize: "clamp(30px,3.6vw,42px)", color: "var(--tss-pine)", letterSpacing: "-0.02em", margin: "12px 0 12px", textWrap: "balance" }}>
            Two apps, two different jobs
          </h2>
          <p style={{ fontFamily: "var(--tss-font-body)", fontSize: 18, lineHeight: 1.6, color: "var(--tss-fg-muted)", margin: 0 }}>
            One teaches you the system. One keeps you organized while you work it. Here's how to tell them apart at a glance.
          </p>
        </div>
        {t.whichAppStyle === "split" ? (
          <div className="split-screen">
            <SplitPane kind="course" />
            <SplitPane kind="tracker" />
          </div>
        ) : (
          <div className="apps-grid">
            <AppCard kind="course" />
            <AppCard kind="tracker" />
          </div>
        )}
      </div>
    </section>
  );
}

/* ------------------ HOW TO USE THE TRACKER ------------------ */
function StepCard({ n, title, body, children }) {
  return (
    <div className="step-card">
      <div className="step-card__head">
        <span className="step-num">{n}</span>
        <h3 className="step-title">{title}</h3>
      </div>
      <p className="step-body">{body}</p>
      {children && <div className="step-action">{children}</div>}
    </div>
  );
}

function TrackerHowTo({ t }) {
  return (
    <section id="tracker-how-to" style={{ background: "var(--tss-sand-50)", padding: "92px 0" }}>
      <div className="wrap">
        {/* intro + video */}
        <div className="howto-top">
          <div>
            <div className="tss-eyebrow">Using the Scholarship Tracker</div>
            <h2 style={{ fontFamily: "var(--tss-font-heading)", fontWeight: 700, fontSize: "clamp(30px,3.6vw,44px)", color: "var(--tss-pine)", letterSpacing: "-0.02em", margin: "12px 0 12px", textWrap: "balance" }}>
              Find. Track. Win.
            </h2>
            <p style={{ fontFamily: "var(--tss-font-accent)", fontStyle: "italic", fontSize: 22, lineHeight: 1.4, color: "var(--tss-forest-800)", margin: "0 0 22px", maxWidth: 480 }}>
              The free toolkit that keeps your whole scholarship search in one organized place.
            </p>
            <p style={{ fontFamily: "var(--tss-font-heading)", fontWeight: 700, fontSize: 12.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--tss-forest)", margin: "0 0 16px" }}>
              You'll be able to:
            </p>
            <div className="feat-list" style={{ gap: 18 }}>
              <FeatureRow icon="list-checks" title="Track every scholarship you find" body="Master the process by saving the scholarships you want to apply to — no more scattered notes and tabs." />
              <FeatureRow icon="bell" title="Never miss a deadline again" body="Get reminders before each scholarship is due, so nothing slips by." />
              <FeatureRow icon="trophy" title="Reach your dollar goals" body="Set a target and watch your progress with the built-in Dollars Tracker." />
              <FeatureRow icon="folder" title="Keep everything in one place" body="All your scholarship info together — without being stuck inside outdated databases." />
            </div>
          </div>

          {/* how-to video card */}
          {t.showHowToVideo !== false && (
            <div>
              <div className="howto-video">
                <iframe src="https://www.youtube.com/embed/JiVAv-j7_7Y" title="Quickly Save Scholarships Using The Scholarship System's App" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen style={{ width: "100%", height: "100%", display: "block", border: 0 }}></iframe>
              </div>
              <p style={{ fontFamily: "var(--tss-font-body)", fontSize: 15.5, lineHeight: 1.55, color: "var(--tss-fg-muted)", margin: "18px 4px 0", textAlign: "center" }}>
                Watch the walkthrough to see exactly how to save, track, and manage scholarships — step by step.
              </p>
            </div>
          )}
        </div>

        {/* get started steps */}
        <div style={{ textAlign: "center", margin: "76px 0 40px" }}>
          <div className="tss-eyebrow">Get started now</div>
          <h2 style={{ fontFamily: "var(--tss-font-heading)", fontWeight: 700, fontSize: "clamp(26px,3vw,36px)", color: "var(--tss-pine)", letterSpacing: "-0.02em", margin: "12px 0 0", textWrap: "balance" }}>
            Set up the Tracker in 4 steps
          </h2>
        </div>
        <div className="steps-grid">
          <StepCard n="1" title="Download the app" body="Get the Scholarship Tracker free on iOS or Android.">
            <div style={{ display: "flex", gap: 9, flexWrap: "wrap" }}>
              <StoreBadge store="apple" href={LINKS.trackerApple} size={16} />
              <StoreBadge store="google" href={LINKS.trackerPlay} size={16} />
            </div>
          </StepCard>
          <StepCard n="2" title="Create a login" body="Set up a new username and password for the app — separate from any course login you may have.">
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--tss-font-heading)", fontWeight: 700, fontSize: 13.5, color: "var(--tss-forest)" }}>
              <Ic name="lock" size={15} sw={2} /> One-time setup
            </span>
          </StepCard>
          <StepCard n="3" title="Install the Chrome extension" body="Save scholarships straight from your browser the moment you find them.">
            <a href={LINKS.trackerChrome} target="_blank" rel="noopener noreferrer"
               style={{ display: "inline-flex", alignItems: "center", gap: 9, fontFamily: "var(--tss-font-heading)", fontWeight: 700, fontSize: 13.5, color: "var(--tss-forest)", textDecoration: "none" }}>
              <ChromeGlyph s={18} /> Get the extension <Ic name="arrow-right" size={15} sw={2.2} />
            </a>
          </StepCard>
          <StepCard n="4" title="Use it from any browser" body="Reach your saved scholarships from any computer — just sign in on the web.">
            <a href={LINKS.trackerWeb} target="_blank" rel="noopener noreferrer"
               style={{ display: "inline-flex", alignItems: "center", gap: 9, fontFamily: "var(--tss-font-heading)", fontWeight: 700, fontSize: 13.5, color: "var(--tss-forest)", textDecoration: "none" }}>
              <Ic name="wifi" size={16} sw={2} /> app.thescholarshipsystem.com
            </a>
          </StepCard>
        </div>

        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 8, marginTop: 30, fontFamily: "var(--tss-font-body)", fontSize: 13.5, color: "var(--tss-fg-subtle)" }}>
          <Ic name="bell" size={15} color="var(--tss-forest)" /> Questions or feedback? Reach the team anytime — they're happy to help you get set up.
        </div>
      </div>
    </section>
  );
}

/* --------------------- COMING JULY — showcase --------------------- */
function Showcase() {
  return (
    <section id="course-app" style={{ background: "linear-gradient(168deg, #1d3327 0%, #0c1611 100%)", color: "#fff", padding: "96px 0", overflow: "hidden" }}>
      <div className="wrap">
        <div className="show-grid">
          <div>
            <div className="tss-eyebrow" style={{ color: "var(--tss-sand)" }}>Now available</div>
            <h2 style={{ fontFamily: "var(--tss-font-heading)", fontWeight: 700, fontSize: "clamp(30px,3.6vw,44px)", color: "#fff", letterSpacing: "-0.02em", margin: "12px 0 14px", textWrap: "balance" }}>
              The whole course, now in your pocket
            </h2>
            <p style={{ fontFamily: "var(--tss-font-accent)", fontStyle: "italic", fontSize: 22, lineHeight: 1.4, color: "var(--tss-sand)", margin: "0 0 30px", maxWidth: 460 }}>
              Everything members love about the program — designed for the way real families learn.
            </p>
            <div className="feat-list" style={{ marginBottom: 32 }}>
              <FeatureRow icon="book-open" tone="sand" title="Learn on the go" body="Pick up any lesson from your phone between practices, shifts, and dinner." />
              <FeatureRow icon="play-circle" tone="sand" title="Watch lessons from anywhere" body="Stream training videos with progress that syncs across your devices." />
              <FeatureRow icon="folder" tone="sand" title="Access member resources" body="Worksheets, templates, and the scholarship database in one place." />
              <FeatureRow icon="target" tone="sand" title="Track your course progress" body="See where you are in the 6-step system and what's next." />
            </div>
            <div style={{ display: "flex", gap: 11, flexWrap: "wrap", alignItems: "center" }}>
              <StoreBadge store="apple" href={LINKS.courseApple} ghost />
              <StoreBadge store="google" href={LINKS.coursePlay} ghost />
            </div>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 8, marginTop: 16, fontFamily: "var(--tss-font-body)", fontSize: 13.5, color: "var(--tss-sand-300)" }}>
              <Ic name="bell" size={15} color="var(--tss-sand)" /> Free for members — download it today.
            </div>
          </div>

          {/* phone cluster */}
          <div className="show-phones" style={{ position: "relative" }}>
            <div aria-hidden="true" style={{ position: "absolute", inset: "0% -10%", background: "radial-gradient(50% 45% at 50% 45%, rgba(217,198,171,0.16), transparent 70%)" }} />
            <div style={{ position: "relative", zIndex: 1, transform: "translateY(26px)", filter: "drop-shadow(0 30px 50px rgba(0,0,0,0.4))" }}>
              <PhoneFrame w={178} id="show-2" placeholder="Lessons list" />
            </div>
            <div style={{ position: "relative", zIndex: 2, filter: "drop-shadow(0 34px 56px rgba(0,0,0,0.5))" }}>
              <PhoneFrame w={210} id="show-1" placeholder="Lesson player" />
            </div>
            <div style={{ position: "relative", zIndex: 1, transform: "translateY(26px)", filter: "drop-shadow(0 30px 50px rgba(0,0,0,0.4))" }}>
              <PhoneFrame w={178} id="show-3" placeholder="Progress dashboard" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ------------------------- WEBINAR CTA ------------------------- */
function WebinarCTA({ t }) {
  return (
    <section id="webinar" style={{ background: "var(--tss-sand-50)", padding: "92px 0" }}>
      <div className="wrap">
        <div className="webinar-card" style={{
          position: "relative", overflow: "hidden", borderRadius: 24,
          background: "linear-gradient(150deg, var(--tss-forest) 0%, var(--tss-forest-900) 100%)",
          color: "#fff", boxShadow: "var(--tss-shadow-lg)",
        }}>
          <div aria-hidden="true" style={{ position: "absolute", top: -80, right: -60, width: 320, height: 320, borderRadius: "50%", background: "radial-gradient(circle, rgba(217,198,171,0.22), transparent 70%)" }} />
          <div className="webinar-grid" style={{ position: "relative", gridTemplateColumns: t.showProof ? "1.3fr 0.7fr" : "1fr" }}>
            <div>
              <div className="tss-eyebrow" style={{ color: "var(--tss-sand)" }}>Not a member yet?</div>
              <h2 style={{ fontFamily: "var(--tss-font-heading)", fontWeight: 700, fontSize: "clamp(30px,3.4vw,42px)", color: "#fff", letterSpacing: "-0.02em", margin: "12px 0 14px", textWrap: "balance" }}>
                Learn how families win scholarships
              </h2>
              <p style={{ fontFamily: "var(--tss-font-body)", fontSize: 18, lineHeight: 1.62, color: "rgba(255,255,255,0.9)", margin: "0 0 28px", maxWidth: 540 }}>
                Discover the strategies thousands of families have used to reduce college costs and earn scholarships — in a free, no-pressure webinar.
              </p>
              <div className="btn-row">
                <a className="tss-btn tss-btn--cta tss-btn--lg" href={LINKS.webinar} target="_blank" rel="noopener noreferrer">
                  <Ic name="play" size={17} sw={2} /> Watch free webinar
                </a>
                <span style={{ fontFamily: "var(--tss-font-body)", fontSize: 13.5, color: "var(--tss-sand-300)" }}>
                  Free · ~60 minutes · nothing to buy
                </span>
              </div>
            </div>
            {t.showProof && (
              <div style={{ display: "grid", gap: 14 }}>
                {[["$125k+", "average scholarships won by members who finish"], ["10,000+", "families have joined the system"], ["Since 2014", "teaching the exact, repeatable system"]].map(([n, l]) => (
                  <div key={n} style={{ background: "rgba(255,255,255,0.08)", border: "1px solid rgba(217,198,171,0.22)", borderRadius: 14, padding: "16px 18px" }}>
                    <div style={{ fontFamily: "var(--tss-font-heading)", fontWeight: 800, fontSize: 28, color: "#fff", letterSpacing: "-0.02em" }}>{n}</div>
                    <div style={{ fontFamily: "var(--tss-font-body)", fontSize: 13.5, color: "var(--tss-sand)", lineHeight: 1.4 }}>{l}</div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------------------- FOOTER ---------------------------- */
function Footer() {
  const cols = [
    { title: "The apps", links: [["Course app — member login", LINKS.courseMember], ["Course App — App Store", LINKS.courseApple], ["Course App — Google Play", LINKS.coursePlay], ["Tracker — App Store", LINKS.trackerApple], ["Tracker — Google Play", LINKS.trackerPlay], ["Tracker — Chrome extension", LINKS.trackerChrome]] },
    { title: "Get started", links: [["Free webinar", LINKS.webinar], ["The two apps", "#apps"], ["The course app", "#course-app"]] },
  ];
  return (
    <footer style={{ background: "var(--tss-pine)", color: "var(--tss-sand)", padding: "64px 0 30px" }}>
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <img src="assets/logo-on-dark.png" alt="The Scholarship System" style={{ height: 64, width: "auto", display: "block" }} />
            <p style={{ fontFamily: "var(--tss-font-body)", fontSize: 14, lineHeight: 1.6, marginTop: 16, maxWidth: 340, color: "var(--tss-sand)", opacity: 0.9 }}>
              Two apps, one mission: help your student win college scholarships. The course app teaches the system; the Tracker keeps you organized while you work it.
            </p>
          </div>
          {cols.map((c) => (
            <div key={c.title}>
              <div style={{ fontFamily: "var(--tss-font-heading)", fontWeight: 700, fontSize: 13, letterSpacing: "0.12em", textTransform: "uppercase", color: "#fff", marginBottom: 14 }}>{c.title}</div>
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 11 }}>
                {c.links.map(([l, href]) => (
                  <li key={l}>
                    <a href={href} target={href.startsWith("#") ? undefined : "_blank"} rel="noopener noreferrer"
                       style={{ fontFamily: "var(--tss-font-body)", fontSize: 14, color: "var(--tss-sand)", textDecoration: "none", opacity: 0.85 }}>{l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 14, paddingTop: 26, marginTop: 44, borderTop: "1px solid rgba(217,198,171,0.2)", fontFamily: "var(--tss-font-body)", fontSize: 12.5, color: "var(--tss-sand)", opacity: 0.78 }}>
          <div>© {new Date().getFullYear()} The Scholarship System, LLC · All rights reserved.</div>
          <div>Made with care for families working toward debt-free college.</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { LINKS, Nav, Hero, WhichApp, TrackerHowTo, Showcase, WebinarCTA, Footer });
