/* 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: "Push alerts", href: "#push" },
              { 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: "Push alerts", href: "#push" },
              { 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 }}>Push notifications for Watched Cases</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: 680, margin: "0 auto 40px", padding: isMobile ? "0 4px" : 0 }}>
          Real-time push notifications when SCOTUS publishes opinions and orders — with optional AI summaries. Plus push notifications of new docket activity, including when orders grant or deny cert. petitions. 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.1 · 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>
          <a href="play-beta.html" 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>Android · Play Store</span>
            <span style={{ fontSize: 11, padding: "2px 7px", borderRadius: 999, background: c.accent + "25", color: c.accent, fontWeight: 700 }}>Closed beta</span>
          </a>
        </div>
        <div style={{ fontSize: 12, color: c.muted, marginBottom: 24 }}>
          v1 is on the App Store today. v2.1 (with Watched Cases) is now live on TestFlight — join the beta with the link above. App Store rollout follows Apple approval.<br/>
          On Android, the APK installs directly. The Google Play Store version is in <a href="play-beta.html" style={{ color: c.accent, textDecoration: "none" }}>Closed Testing — request access</a>.
        </div>

        {/* Press mention */}
        <a
          href="https://www.theverge.com/tech/922505/vibe-code-projects-claude-installer"
          target="_blank"
          rel="noopener noreferrer"
          style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            padding: "8px 16px", borderRadius: 999,
            background: "transparent",
            border: `1px solid ${c.border}`,
            color: c.muted, fontSize: 12, fontWeight: 500,
            textDecoration: "none", marginBottom: 60,
            letterSpacing: 0.2,
          }}
        >
          <span style={{ fontSize: 10, fontWeight: 700, color: c.muted, letterSpacing: 1.4, textTransform: "uppercase" }}>Mentioned in</span>
          <span style={{ width: 1, height: 12, background: c.border }} />
          <span style={{
            fontFamily: "Georgia, 'Times New Roman', serif",
            fontStyle: "italic",
            fontWeight: 700,
            fontSize: 14,
            color: c.text,
            letterSpacing: -0.2,
          }}>The Verge</span>
          <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.6 }}>
            <path d="M7 17L17 7" />
            <path d="M8 7h9v9" />
          </svg>
        </a>

        {/* 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: "Docket push alerts", d: "Pin a case — get a push the instant a new entry hits the docket.", 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>

      {/* PUSH NOTIFICATIONS — headline feature */}
      <section id="push" style={{ scrollMarginTop: 80, padding: isMobile ? "0 20px 56px" : "0 40px 80px" }}>
        <div style={{
          maxWidth: 1180, margin: "0 auto",
          background: `linear-gradient(135deg, ${c.surface} 0%, ${c.surface2} 100%)`,
          border: `1px solid ${c.border}`,
          borderRadius: 24,
          overflow: "hidden",
          position: "relative",
        }}>
          {/* Subtle accent glow */}
          <div style={{
            position: "absolute", top: -60, right: -60,
            width: 280, height: 280, borderRadius: "50%",
            background: `radial-gradient(circle, ${c.accent}25, transparent 70%)`,
            pointerEvents: "none",
          }} />

          <div style={{
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr" : "1.05fr 1fr",
            gap: isMobile ? 32 : 56,
            padding: isMobile ? "36px 24px" : "56px 56px",
            alignItems: "center",
            position: "relative",
          }}>
            {/* Copy column */}
            <div>
              <div style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                fontSize: 11, fontWeight: 700, letterSpacing: 1.4, textTransform: "uppercase",
                color: c.accent, marginBottom: 16,
              }}>
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke={c.accent} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
                  <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
                </svg>
                <span>New · Available now</span>
              </div>
              <h2 style={{
                fontSize: isMobile ? 30 : 44, fontWeight: 700, letterSpacing: -1.4,
                lineHeight: 1.04, margin: "0 0 18px",
              }}>
                Push notifications<br/>
                <span style={{
                  background: `linear-gradient(135deg, ${c.accent} 0%, #5e9eff 100%)`,
                  WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
                  backgroundClip: "text",
                }}>for any docket.</span>
              </h2>
              <p style={{ fontSize: isMobile ? 15 : 16, color: c.muted, margin: "0 0 18px", lineHeight: 1.55 }}>
                The Court doesn't push. It sends emails — one per filing, only after a one-time CAPTCHA + verification link per docket. Even then, you have to open the email, click through, and hunt for the new entry.
              </p>
              <p style={{ fontSize: isMobile ? 15 : 16, color: c.text, margin: "0 0 24px", lineHeight: 1.55 }}>
                <strong>SCOTUSWatch turns those emails into push.</strong> One user solves the CAPTCHA per docket — then everyone watching that case gets pushes. Tap the notification: the docket opens with the newest entry right on top, ready to read and share.
              </p>

              {/* Three-step strip */}
              <div style={{
                display: "grid",
                gridTemplateColumns: "repeat(3, 1fr)",
                gap: 12,
                marginBottom: 24,
              }}>
                {[
                  { n: "1", t: "Tap the bell", d: "On any watched case." },
                  { n: "2", t: "Solve once", d: "First user does the CAPTCHA — for everyone." },
                  { n: "3", t: "Push lands", d: "Newest entry, right on top." },
                ].map((s, i) => (
                  <div key={i} style={{
                    background: c.bg + "80",
                    border: `1px solid ${c.border}`,
                    borderRadius: 10,
                    padding: "12px 12px",
                  }}>
                    <div style={{
                      fontSize: 11, fontWeight: 700, color: c.accent,
                      width: 22, height: 22, borderRadius: "50%",
                      background: c.accent + "20",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      marginBottom: 8,
                    }}>{s.n}</div>
                    <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 2 }}>{s.t}</div>
                    <div style={{ fontSize: 12, color: c.muted, lineHeight: 1.4 }}>{s.d}</div>
                  </div>
                ))}
              </div>

              <div style={{
                fontSize: 12, color: c.muted, lineHeight: 1.55,
                padding: "10px 12px",
                background: c.bg + "60",
                border: `1px solid ${c.border}`,
                borderRadius: 8,
              }}>
                <strong style={{ color: c.text }}>Solve once, everyone benefits.</strong> The first user to enable a docket solves the CAPTCHA — after that, every user watching that case gets pushes automatically.
              </div>
            </div>

            {/* Phones column — three iOS shots showing the flow */}
            <div style={{
              display: "flex", justifyContent: "center", alignItems: "flex-end",
              gap: isMobile ? 8 : 16,
              flexWrap: "nowrap",
            }}>
              <div style={{ marginBottom: 24, opacity: 0.85 }}>
                <IPhoneFrame width={isMobile ? 100 : 150} tilt={-3} shadow={true}>
                  <RealScreenshot src={IOSShots.pushCasesBlank.src} alt="Watched Cases — bell not yet enabled" />
                </IPhoneFrame>
                <div style={{ textAlign: "center", marginTop: 8, fontSize: 10, color: c.muted, fontWeight: 600 }}>1 · Tap bell</div>
              </div>
              <div style={{ zIndex: 2 }}>
                <IPhoneFrame width={isMobile ? 116 : 170} tilt={0} shadow={true}>
                  <RealScreenshot src={IOSShots.pushEnable.src} alt="Enable Push" />
                </IPhoneFrame>
                <div style={{ textAlign: "center", marginTop: 8, fontSize: 10, color: c.text, fontWeight: 600 }}>2 · Solve once per docket</div>
              </div>
              <div style={{ marginBottom: 24, opacity: 0.85 }}>
                <IPhoneFrame width={isMobile ? 100 : 150} tilt={3} shadow={true}>
                  <RealScreenshot src={IOSShots.pushConfirm.src} alt="Subscription confirmed" />
                </IPhoneFrame>
                <div style={{ textAlign: "center", marginTop: 8, fontSize: 10, color: c.muted, fontWeight: 600 }}>3 · Everyone gets push</div>
              </div>
            </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>
            {walkthroughTab === "android" && (
              <p style={{ fontSize: 13, color: c.muted, marginBottom: 20, lineHeight: 1.55, fontStyle: "italic" }}>
                The APK installs directly from GitHub. The Google Play Store build is in <a href="play-beta.html" style={{ color: c.accent, textDecoration: "none", fontStyle: "normal", fontWeight: 600 }}>Closed Testing</a> — send me your Google Play email and I'll add you to the tester list.
              </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.1 · live</span>
                    </a>
                  </React.Fragment>
                : <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>
                    <a href="play-beta.html" 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 }}>
                      Play Store
                      <span style={{ fontSize: 10, padding: "1px 6px", borderRadius: 999, background: c.accent + "25", color: c.accent, fontWeight: 700 }}>Closed beta</span>
                    </a>
                  </React.Fragment>
              }
            </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 apps built to solve specific problems.</p>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: 16, maxWidth: 1080 }}>
          <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" />
          <OtherAppCard c={c} icon={<VeyrnIcon theme={theme} />} title="Veyrn" platform="iOS · iPadOS · macOS" desc="A native iOS, iPadOS, and macOS client for Vikunja, the open-source self-hosted tasks and to-do app." price="Free" url="https://apps.apple.com/app/veyrn/id6764057920" />
        </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 });