/* Variation 3 — Dual-device hero + tabbed walkthroughs
   iPhone + Pixel side-by-side establish both platforms upfront.
   Below: tabbed video/screenshot walkthrough area + Bluesky feed.
   Windows tucked into a discreet badge in the footer area.
*/

// Reactive viewport hook — updates on resize.
const useIsMobile = (breakpoint = 760) => {
  const [isMobile, setIsMobile] = React.useState(
    typeof window !== "undefined" ? window.innerWidth <= breakpoint : false
  );
  React.useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth <= breakpoint);
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, [breakpoint]);
  return isMobile;
};

const V3Site = ({ theme = "dark" }) => {
  const [walkthroughTab, setWalkthroughTab] = React.useState("ios");
  const [heroFront, setHeroFront] = React.useState("ios"); // "ios" or "android" — click to bring to front
  const [navOpen, setNavOpen] = React.useState(false);
  const isMobile = useIsMobile(760);

  const c = theme === "dark"
    ? { bg: "#0c0c10", surface: "#16161c", surface2: "#1d1d24", border: "#26262e", text: "#f0f0f5", muted: "#8a8a94", accent: "#0a84ff" }
    : { bg: "#fafafa", surface: "#ffffff", surface2: "#f4f4f7", border: "#e5e5ea", text: "#0e0e12", muted: "#666670", accent: "#0a84ff" };

  return (
    <div style={{
      background: c.bg, color: c.text,
      fontFamily: "Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
      minHeight: "100%", lineHeight: 1.5,
    }}>
      {/* NAV */}
      <nav style={{
        display: "flex", justifyContent: "space-between", alignItems: "center",
        padding: isMobile ? "14px 20px" : "18px 40px",
        paddingRight: isMobile ? 60 : 68,
        borderBottom: `1px solid ${c.border}`,
        position: "sticky", top: 0, background: c.bg + "ee", backdropFilter: "blur(12px)", zIndex: 100,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <SCOTUSIcon size={28} radius={7} theme={theme} />
          <span style={{ fontSize: 15, fontWeight: 600, letterSpacing: -0.2 }}>SCOTUSWatch</span>
        </div>
        {isMobile ? (
          <button
            onClick={() => setNavOpen(o => !o)}
            aria-label="Menu"
            aria-expanded={navOpen}
            style={{
              background: "transparent", border: `1px solid ${c.border}`,
              color: c.text, width: 36, height: 36, borderRadius: 8,
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              cursor: "pointer", padding: 0,
            }}
          >
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              {navOpen
                ? <React.Fragment><path d="M6 6l12 12"/><path d="M18 6L6 18"/></React.Fragment>
                : <React.Fragment><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></React.Fragment>}
            </svg>
          </button>
        ) : (
          <ul style={{ listStyle: "none", display: "flex", gap: 28, margin: 0, padding: 0 }}>
            {[
              { label: "Walkthrough", href: "#walkthrough" },
              { label: "Bluesky",     href: "#bluesky" },
              { label: "Other Apps",  href: "#other-apps" },
              { label: "Support",     href: "support.html" },
              { label: "Privacy",     href: "privacy.html" },
            ].map(l => (
              <li key={l.label}><a href={l.href} style={{ color: c.muted, fontSize: 14, textDecoration: "none" }}>{l.label}</a></li>
            ))}
          </ul>
        )}
        {isMobile && navOpen && (
          <ul style={{
            listStyle: "none", margin: 0, padding: "8px 0",
            position: "absolute", top: "100%", left: 0, right: 0,
            background: c.bg, borderBottom: `1px solid ${c.border}`,
            boxShadow: "0 12px 24px rgba(0,0,0,0.25)",
            display: "flex", flexDirection: "column",
          }}>
            {[
              { label: "Walkthrough", href: "#walkthrough" },
              { label: "Bluesky",     href: "#bluesky" },
              { label: "Other Apps",  href: "#other-apps" },
              { label: "Support",     href: "support.html" },
              { label: "Privacy",     href: "privacy.html" },
            ].map(l => (
              <li key={l.label}>
                <a
                  href={l.href}
                  onClick={() => setNavOpen(false)}
                  style={{
                    display: "block",
                    color: c.text, fontSize: 15, textDecoration: "none",
                    padding: "12px 22px",
                    borderTop: `1px solid ${c.border}`,
                  }}
                >{l.label}</a>
              </li>
            ))}
          </ul>
        )}
      </nav>

      {/* HERO — dual device */}
      <section style={{
        textAlign: "center",
        padding: isMobile ? "48px 20px 32px" : "80px 40px 40px",
        position: "relative",
      }}>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          padding: "6px 14px", borderRadius: 999,
          background: "linear-gradient(135deg, rgba(10,132,255,0.18), rgba(10,132,255,0.05))",
          border: `1px solid ${c.accent}40`,
          fontSize: 12, fontWeight: 600,
          marginBottom: 28,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: c.accent, animation: "pulse 2s ease-in-out infinite" }} />
          <span style={{ color: c.accent }}>NEW</span>
          <span style={{ opacity: 0.85, color: c.text }}>Watched Cases — monitor any docket</span>
        </div>

        <h1 style={{
          fontSize: isMobile ? 44 : 76, fontWeight: 700, letterSpacing: isMobile ? -1.6 : -3,
          lineHeight: isMobile ? 1.02 : 0.98, margin: 0, marginBottom: 24,
          maxWidth: 900, marginLeft: "auto", marginRight: "auto",
        }}>
          Track the Supreme Court,<br />
          <span style={{
            background: `linear-gradient(135deg, ${c.accent} 0%, #5e9eff 100%)`,
            WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
            backgroundClip: "text",
          }}>instantly.</span>
        </h1>
        <p style={{ fontSize: isMobile ? 16 : 19, color: c.muted, maxWidth: 620, margin: "0 auto 40px", padding: isMobile ? "0 4px" : 0 }}>
          Real-time push notifications when SCOTUS publishes opinions, orders, or docket activity — with optional AI summaries. Free on iOS, Android, and Bluesky.
        </p>

        <div style={{ display: "flex", justifyContent: "center", gap: 10, flexWrap: "wrap", marginBottom: 14 }}>
          <a href="https://apps.apple.com/us/app/scotuswatch/id6760475075" target="_blank" rel="noopener noreferrer" style={{ background: c.text, color: c.bg, padding: "13px 22px", borderRadius: 999, fontSize: 14, fontWeight: 600, textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 8 }}>
            <span>iOS · App Store</span>
            <span style={{ fontSize: 11, padding: "2px 7px", borderRadius: 999, background: c.bg + "33", border: `1px solid ${c.bg}33`, fontWeight: 700 }}>v1</span>
          </a>
          <a href="https://testflight.apple.com/join/nAn3bAwR" target="_blank" rel="noopener noreferrer" style={{ background: "transparent", color: c.text, padding: "13px 22px", borderRadius: 999, fontSize: 14, fontWeight: 600, textDecoration: "none", border: `1px solid ${c.border}`, display: "inline-flex", alignItems: "center", gap: 8 }}>
            <span>iOS · TestFlight</span>
            <span style={{ fontSize: 11, padding: "2px 7px", borderRadius: 999, background: c.accent + "25", color: c.accent, fontWeight: 700 }}>v2.0 · live</span>
          </a>
          <a href="https://github.com/scottsapps/SCOTUSWatch_Android" target="_blank" rel="noopener noreferrer" style={{ background: "transparent", color: c.text, padding: "13px 22px", borderRadius: 999, fontSize: 14, fontWeight: 600, textDecoration: "none", border: `1px solid ${c.border}` }}>Android · APK</a>
        </div>
        <div style={{ fontSize: 12, color: c.muted, marginBottom: 60 }}>
          v1 is on the App Store today. v2.0 (with Watched Cases) is now live on TestFlight — join the beta with the link above. App Store rollout follows Apple approval.
        </div>

        {/* Dual device — side-by-side on desktop, side-by-side smaller on mobile */}
        <div style={{ position: "relative", maxWidth: 1000, margin: "0 auto", paddingTop: 20 }}>
          <div style={{
            position: "absolute", inset: 0,
            background: "radial-gradient(ellipse at center, rgba(10,132,255,0.15), transparent 60%)",
            filter: "blur(40px)", pointerEvents: "none",
          }} />
          <div style={{
            position: "relative",
            display: "flex", justifyContent: "center", alignItems: "flex-start",
            gap: isMobile ? 8 : 60, flexWrap: "wrap",
          }}>
            <div
              onClick={() => setHeroFront("ios")}
              style={{
                cursor: "pointer",
                transform: heroFront === "ios" ? "scale(1.04)" : "scale(1)",
                transition: "transform 350ms ease, filter 350ms ease",
                filter: heroFront === "ios" ? "none" : "brightness(0.85)",
                zIndex: heroFront === "ios" ? 2 : 1,
              }}
              title="iOS"
            >
              <IPhoneFrame width={isMobile ? 132 : 260} tilt={isMobile ? 0 : -4}>
                <RotatingScreenshot kinds={[IOSShots.documents, IOSShots.cases, IOSShots.summary, IOSShots.archive]} theme={theme} />
              </IPhoneFrame>
              <div style={{ textAlign: "center", marginTop: 14, fontSize: 13, fontWeight: 600, color: heroFront === "ios" ? c.text : c.muted }}>
                iOS · iPadOS
              </div>
            </div>
            <div
              onClick={() => setHeroFront("android")}
              style={{
                cursor: "pointer",
                transform: heroFront === "android" ? "scale(1.04)" : "scale(1)",
                transition: "transform 350ms ease, filter 350ms ease",
                filter: heroFront === "android" ? "none" : "brightness(0.85)",
                zIndex: heroFront === "android" ? 2 : 1,
                marginTop: isMobile ? 0 : 30,
              }}
              title="Android"
            >
              <AndroidFrame width={isMobile ? 128 : 250} tilt={isMobile ? 0 : 4}>
                <RotatingScreenshot kinds={[AndroidShots.documents, AndroidShots.cases, AndroidShots.docket, AndroidShots.summary]} theme={theme} interval={3200} />
              </AndroidFrame>
              <div style={{ textAlign: "center", marginTop: 14, fontSize: 13, fontWeight: 600, color: heroFront === "android" ? c.text : c.muted }}>
                Android
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FEATURE STRIP */}
      <section style={{ maxWidth: 1100, margin: "0 auto", padding: isMobile ? "20px 20px 56px" : "20px 40px 80px" }}>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 18 : 24, borderTop: `1px solid ${c.border}`, paddingTop: isMobile ? 28 : 40 }}>
          {[
            { t: "Real-time push", d: "Notifications fire within seconds of publication." },
            { t: "AI summaries", d: "Optional plain-English explanations of every ruling." },
            { t: "Watched dockets", d: "Pin individual cases for filing-level alerts.", isNew: true },
          ].map((f, i) => (
            <div key={i}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 15, fontWeight: 600 }}>
                {f.t}
                {f.isNew && <span style={{ fontSize: 10, padding: "2px 6px", borderRadius: 4, background: c.accent + "25", color: c.accent, fontWeight: 700, letterSpacing: 0.4 }}>NEW</span>}
              </div>
              <div style={{ fontSize: 14, color: c.muted, marginTop: 6 }}>{f.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* WALKTHROUGH SECTION — tabbed video area */}
      <section id="walkthrough" style={{ maxWidth: 1180, margin: "0 auto", padding: isMobile ? "0 20px 56px" : "0 40px 80px", scrollMarginTop: 80 }}>
        <div style={{ textAlign: "center", marginBottom: 32 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: c.muted, letterSpacing: 1.5, textTransform: "uppercase" }}>Walkthrough</div>
          <h2 style={{ fontSize: isMobile ? 28 : 36, fontWeight: 700, letterSpacing: -1.2, margin: "8px 0 0" }}>See it in motion.</h2>
        </div>

        <div style={{ display: "flex", justifyContent: "center", gap: 6, marginBottom: 24 }}>
          {[
            { id: "ios", label: "iOS" },
            { id: "android", label: "Android" },
          ].map(t => (
            <button key={t.id} onClick={() => setWalkthroughTab(t.id)} style={{
              background: walkthroughTab === t.id ? c.text : "transparent",
              color: walkthroughTab === t.id ? c.bg : c.muted,
              border: `1px solid ${walkthroughTab === t.id ? c.text : c.border}`,
              padding: "8px 18px", borderRadius: 999,
              fontSize: 13, fontWeight: 600, cursor: "pointer",
              fontFamily: "inherit",
            }}>{t.label}</button>
          ))}
        </div>

        {/* Walkthrough video area */}
        <div style={{
          background: c.surface, border: `1px solid ${c.border}`,
          borderRadius: 20, padding: isMobile ? 20 : 40,
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "auto 1fr",
          gap: isMobile ? 24 : 48,
          alignItems: "center",
        }}>
          <div style={{ display: "flex", justifyContent: "center" }}>
            <div style={{ width: "100%", maxWidth: isMobile ? 320 : 280 }}>
              <WalkthroughVideo
                src={WalkthroughVideos[walkthroughTab]}
                fallbackImg={walkthroughTab === "ios" ? IOSShots.documents.src : AndroidShots.documents.src}
                label={walkthroughTab === "ios" ? "iOS walkthrough" : "Android walkthrough"}
              />
            </div>
          </div>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, color: c.accent, letterSpacing: 1.2, textTransform: "uppercase", marginBottom: 8 }}>{walkthroughTab === "ios" ? "iOS · iPadOS" : "Android"}</div>
            <h3 style={{ fontSize: isMobile ? 20 : 24, fontWeight: 700, letterSpacing: -0.6, margin: "0 0 12px" }}>
              {walkthroughTab === "ios"
                ? "Notification → opinion in two taps."
                : "Same instant push, native to Android."}
            </h3>
            <p style={{ fontSize: 14, color: c.muted, marginBottom: 20 }}>
              {walkthroughTab === "ios"
                ? "Push lands the moment SCOTUS publishes. Tap the notification, read the slip opinion, and the AI summary appears beside it."
                : "Push notifications fire the moment SCOTUS publishes. Tap to open the document directly. Watched Cases tracks individual dockets for filing-level alerts."}
            </p>
            <UpcomingCallout c={c} />
            <div style={{ display: "flex", gap: 10, marginTop: 20, flexWrap: "wrap", alignItems: "center" }}>
              <Pill bg="#1e3a1e" fg="#4caf50" border="#2e5a2e">Free</Pill>
              {walkthroughTab === "ios"
                ? <React.Fragment>
                    <a href="https://apps.apple.com/us/app/scotuswatch/id6760475075" target="_blank" rel="noopener noreferrer" style={{ background: c.accent, color: "#fff", padding: "8px 14px", borderRadius: 999, fontSize: 13, fontWeight: 600, textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 6 }}>
                      App Store
                      <span style={{ fontSize: 10, padding: "1px 6px", borderRadius: 999, background: "rgba(255,255,255,0.22)", fontWeight: 700 }}>v1</span>
                    </a>
                    <a href="https://testflight.apple.com/join/nAn3bAwR" target="_blank" rel="noopener noreferrer" style={{ background: "transparent", color: c.text, padding: "8px 14px", borderRadius: 999, fontSize: 13, fontWeight: 600, textDecoration: "none", border: `1px solid ${c.border}`, display: "inline-flex", alignItems: "center", gap: 6 }}>
                      TestFlight
                      <span style={{ fontSize: 10, padding: "1px 6px", borderRadius: 999, background: c.accent + "25", color: c.accent, fontWeight: 700 }}>v2.0 · live</span>
                    </a>
                  </React.Fragment>
                : <a href="https://github.com/scottsapps/SCOTUSWatch_Android" target="_blank" rel="noopener noreferrer" style={{ background: "#238636", color: "#fff", padding: "8px 16px", borderRadius: 999, fontSize: 13, fontWeight: 600, textDecoration: "none" }}>Download APK</a>
              }
            </div>
          </div>
        </div>

        {/* Screenshot strip below walkthrough */}
        <div style={{ display: "flex", gap: 16, justifyContent: "center", marginTop: 32, flexWrap: "wrap" }}>
          {(walkthroughTab === "ios"
            ? [IOSShots.documents, IOSShots.summary, IOSShots.cases, IOSShots.docket, IOSShots.archive]
            : [AndroidShots.documents, AndroidShots.summary, AndroidShots.cases, AndroidShots.docket, AndroidShots.archive]
          ).map((k, i) => (
            walkthroughTab === "ios"
              ? <IPhoneFrame key={i} width={140} tilt={0} shadow={false}><RealScreenshot src={k.src} /></IPhoneFrame>
              : <AndroidFrame key={i} width={140} tilt={0}><RealScreenshot src={k.src} /></AndroidFrame>
          ))}
        </div>
      </section>

      {/* BLUESKY */}
      <section id="bluesky" style={{ background: c.surface, borderTop: `1px solid ${c.border}`, borderBottom: `1px solid ${c.border}`, padding: isMobile ? "56px 20px" : "80px 40px", scrollMarginTop: 80 }}>
        <div style={{ maxWidth: 1100, margin: "0 auto", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.05fr", gap: isMobile ? 32 : 60, alignItems: "start" }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, color: "#0085ff", letterSpacing: 1.2, textTransform: "uppercase", marginBottom: 10 }}>Bluesky</div>
            <h2 style={{ fontSize: isMobile ? 30 : 40, fontWeight: 700, letterSpacing: -1.2, lineHeight: 1.05, margin: 0, marginBottom: 16 }}>Or just follow the feed.</h2>
            <p style={{ fontSize: 16, color: c.muted, marginBottom: 24, maxWidth: 460 }}>
              Real-time posts the moment new Supreme Court documents publish, with AI-generated summaries posted as reply threads. No app required.
            </p>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center" }}>
              <Pill bg="#1e3a1e" fg="#4caf50" border="#2e5a2e">Free</Pill>
              <a href="https://bsky.app/profile/scotuswatch.bsky.social" target="_blank" style={{ background: "#0085ff", color: "#fff", padding: "10px 18px", borderRadius: 999, fontSize: 13, fontWeight: 600, textDecoration: "none" }}>Follow @scotuswatch.bsky.social</a>
            </div>
          </div>
          <BlueskyEmbed theme={theme} />
        </div>
      </section>

      {/* OTHER APPS */}
      <section id="other-apps" style={{ maxWidth: 1100, margin: "0 auto", padding: isMobile ? "56px 20px 24px" : "80px 40px 40px", scrollMarginTop: 80 }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: c.muted, letterSpacing: 1.5, textTransform: "uppercase", marginBottom: 8 }}>Other Apps</div>
        <p style={{ color: c.muted, fontSize: 14, marginBottom: 24, maxWidth: 600 }}>A small collection of focused macOS apps built to solve specific problems.</p>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)", gap: 16, maxWidth: 720 }}>
          <OtherAppCard c={c} icon={<MyNewMusicIcon />} title="My New Music" platform="macOS" desc="Checks your Apple Music library for new releases by artists you already follow." price="$2.99" url="https://apps.apple.com/us/app/new-music-releases/id6758525491?mt=12" />
          <OtherAppCard c={c} icon={<VigilIcon />} title="Vigil Auto Refresh" platform="macOS · Safari Extension" desc="Set a custom auto-refresh interval for any webpage and monitor for specific page changes." price="$0.99" url="https://apps.apple.com/us/app/custom-refresh-for-safari/id6758681090?mt=12" />
        </div>
      </section>

      {/* WINDOWS SECTION — real screenshot, modest treatment */}
      <section style={{ maxWidth: 1100, margin: "0 auto", padding: isMobile ? "0 20px 56px" : "0 40px 80px" }}>
        <div style={{
          background: c.surface, border: `1px solid ${c.border}`,
          borderRadius: 20, padding: isMobile ? 20 : 32,
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1fr 1.4fr",
          gap: isMobile ? 24 : 36,
          alignItems: "center",
        }}>
          <div>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
              <div style={{ width: 22, height: 22, borderRadius: 4, background: "#0078D4", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <svg viewBox="0 0 24 24" width="13" height="13" fill="#fff">
                  <path d="M2 4l8.5-1.2v8.7H2V4zm0 16l8.5 1.2v-8.7H2V20zm9.5 1.3L22 22.7V12.5h-10.5v8.8zm0-19.6V11h10.5V1.3L11.5 1.7z" />
                </svg>
              </div>
              <span style={{ fontSize: 11, fontWeight: 700, color: c.muted, letterSpacing: 1.2, textTransform: "uppercase" }}>Also on Windows</span>
            </div>
            <h3 style={{ fontSize: 24, fontWeight: 700, letterSpacing: -0.6, margin: "0 0 12px" }}>Desktop notifications, system tray.</h3>
            <p style={{ fontSize: 14, color: c.muted, marginBottom: 16, lineHeight: 1.55 }}>
              The Windows app runs in the system tray and delivers real-time notifications when SCOTUS publishes new opinions or orders, with AI summaries.
            </p>
            <p style={{ fontSize: 13, color: c.muted, fontStyle: "italic", marginBottom: 18, opacity: 0.8 }}>
              The Windows app is maintained but is no longer the focus of new feature work — iOS and Android lead.
            </p>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center" }}>
              <Pill bg="#1e3a1e" fg="#4caf50" border="#2e5a2e">Free</Pill>
              <a href="https://apps.microsoft.com/detail/9n2nmt00tqbw" target="_blank" rel="noopener noreferrer" style={{ background: "#0078D4", color: "#fff", padding: "9px 16px", borderRadius: 999, fontSize: 13, fontWeight: 600, textDecoration: "none" }}>Microsoft Store →</a>
            </div>
          </div>
          <div style={{
            borderRadius: 12, overflow: "hidden",
            border: `1px solid ${c.border}`,
            boxShadow: "0 20px 40px -15px rgba(0,0,0,0.4)",
            background: "#fff",
          }}>
            <img src="assets/windows-app.png" alt="SCOTUSWatch for Windows" style={{ width: "100%", display: "block" }} />
          </div>
        </div>
      </section>

      {/* PRIVACY */}
      <section style={{ maxWidth: 1100, margin: "0 auto", padding: isMobile ? "20px 20px 40px" : "20px 40px 60px" }}>
        <div style={{
          background: c.surface, border: `1px solid ${c.border}`, borderLeft: `3px solid ${c.accent}`,
          borderRadius: 12, padding: "18px 22px", fontSize: 14, color: c.muted, maxWidth: 800,
        }}>
          <strong style={{ color: c.text }}>Your privacy is respected.</strong> Most of these apps collect no data whatsoever. SCOTUSWatch stores only your device's push token to deliver notifications.
        </div>
      </section>

      <footer style={{ borderTop: `1px solid ${c.border}`, padding: isMobile ? "24px 20px" : "32px 40px", textAlign: "center", color: c.muted, fontSize: 13 }}>
        <div style={{ display: "flex", justifyContent: "center", gap: 24, marginBottom: 10, flexWrap: "wrap" }}>
          <a href="support.html" style={{ color: c.muted, textDecoration: "none" }}>Support</a>
          <a href="privacy.html" style={{ color: c.muted, textDecoration: "none" }}>Privacy Policy</a>
          <a href="https://bsky.app/profile/scotuswatch.bsky.social" target="_blank" style={{ color: c.muted, textDecoration: "none" }}>Bluesky</a>
        </div>
        <div>© 2026 Scott's Apps</div>
      </footer>
    </div>
  );
};

Object.assign(window, { V3Site });