// pages-marketing.jsx — Home, About, Contact, Products

// -------------------------------------------------------------- HOME
function HomePage() {
  const { go } = useRoute();
  return (
    <main className="page" data-screen-label="01 Home">
      {/* HERO ─────────────────────────────────────────────────── */}
      <section style={{ position: "relative", overflow: "hidden", paddingTop: 56 }}>
        <div className="kaiju-bg" aria-hidden="true">
          <KaijuSilhouette color="var(--ink)" />
        </div>

        <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
          <div className="eyebrow" style={{ marginBottom: 28 }}>
            <span className="dot"></span>
            <span>Independent software studio · est. 2026</span>
            <span style={{ flex: 1 }} />
            <span style={{ color: "var(--mist)" }}>Ontario, Canada / 43.65°N</span>
          </div>

          <h1 className="display" style={{ marginBottom: 32 }}>
            We build apps<br/>
            that help you<br/>
            <span style={{ color: "var(--vermillion)" }}>explore</span> your city.
          </h1>

          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 32, flexWrap: "wrap", marginBottom: 90 }}>
            <p className="lead" style={{ maxWidth: 520 }}>
              Kaiju Labs is a small Canadian studio quietly unleashing useful,
              privacy-first mobile apps for the places we actually live.
            </p>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
              <button className="btn btn-primary" onClick={() => go("toronto-events")}>
                Meet Toronto Events <span className="arr">→</span>
              </button>
              <button className="btn btn-ghost" onClick={() => go("about")}>
                About the studio
              </button>
            </div>
          </div>

          {/* meta strip */}
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 0,
            borderTop: "1px solid var(--line)", paddingTop: 22, marginBottom: 12,
          }}>
            <MetaCell label="Studio №" value="K-001" />
            <MetaCell label="HQ" value="Ontario, CA" />
            <MetaCell label="Apps shipped" value="01" />
            <MetaCell label="Data we collect" value="None." accent />
          </div>
        </div>
      </section>

      {/* TICKER ────────────────────────────────────────────────── */}
      <section style={{ padding: "32px 0", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", background: "var(--paper)" }}>
        <div className="ticker">
          {[0, 1].map(k => (
            <div className="ticker-track" key={k}>
              {Array.from({ length: 8 }).map((_, i) => (
                <span key={i} className="tick-item">
                  <span className="sep">怪</span> No analytics.
                  <span className="sep">獣</span> No tracking.
                  <span className="sep">研</span> No accounts.
                  <span className="sep">究</span> Local data only.
                  <span className="sep">所</span> Open data, by design.
                </span>
              ))}
            </div>
          ))}
        </div>
      </section>

      {/* FEATURED PRODUCT ─────────────────────────────────────── */}
      <section style={{ paddingTop: 96 }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 22 }}>
            <span className="label" style={{ color: "var(--ink-2)" }}>Currently in the lab</span>
            <span className="rule" style={{ flex: 1 }} />
            <span className="mono" style={{ color: "var(--mist)" }}>K-001 / 01</span>
          </div>

          <FeaturedToronto />
        </div>
      </section>

      {/* STUDIO BLURB ────────────────────────────────────────── */}
      <section style={{ paddingTop: 110 }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
          <div>
            <span className="label">About the studio</span>
            <h2 className="h2" style={{ marginTop: 18 }}>
              A small Canadian studio.<br/>
              <span style={{ color: "var(--mist)" }}>Big lumbering ambitions.</span>
            </h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <p className="lead">
              Kaiju Labs Inc. is a one-of-one software studio based in Ontario, Canada.
              We design and build mobile apps with a single rule:
              <strong style={{ color: "var(--ink)" }}> useful first, quiet about it.</strong>
            </p>
            <p className="lead" style={{ color: "var(--ink-2)" }}>
              That means privacy-respecting by default — no accounts, no analytics,
              no third-party SDKs — and a clear focus on local communities, open data,
              and the slow work of making small things well.
            </p>
            <div style={{ display: "flex", gap: 24, marginTop: 14, alignItems: "center" }}>
              <button className="btn btn-primary" onClick={() => go("about")}>
                Read about Kaiju Labs <span className="arr">→</span>
              </button>
              <a href="mailto:support@kaijulabs.ca" className="mono" style={{ color: "var(--vermillion)", fontSize: 13 }}>
                support@kaijulabs.ca →
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* CONTACT STRIP ───────────────────────────────────────── */}
      <section style={{ marginTop: 110 }}>
        <div className="wrap">
          <div className="card card-dark" style={{ padding: "56px 48px", position: "relative", overflow: "hidden" }}>
            <TatamiBG opacity={0.08} />
            <div style={{ position: "absolute", top: 32, right: 40 }}>
              <Hanko>怪</Hanko>
            </div>
            <span className="label" style={{ color: "color-mix(in oklab, var(--paper) 60%, transparent)" }}>Get in touch</span>
            <h2 className="h2" style={{ marginTop: 12, color: "var(--paper)", maxWidth: 720 }}>
              Questions, press, partnerships, or just kind notes — all welcome.
            </h2>
            <div style={{ display: "flex", gap: 16, flexWrap: "wrap", marginTop: 32 }}>
              <a href="mailto:support@kaijulabs.ca" className="btn" style={{ background: "var(--paper)", color: "var(--ink)", border: "1px solid var(--paper)" }}>
                support@kaijulabs.ca
              </a>
              <button className="btn" onClick={() => go("about")}
                style={{ background: "transparent", color: "var(--paper)", border: "1px solid color-mix(in oklab, var(--paper) 30%, transparent)" }}>
                About the studio →
              </button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function MetaCell({ label, value, accent }) {
  return (
    <div style={{ borderRight: "1px solid var(--line)", padding: "10px 18px 10px 0" }}>
      <div className="label" style={{ marginBottom: 4 }}>{label}</div>
      <div style={{
        fontFamily: "var(--display)", fontWeight: 700, fontSize: 22,
        letterSpacing: "-.01em",
        color: accent ? "var(--vermillion)" : "var(--ink)"
      }}>{value}</div>
    </div>
  );
}

function FeaturedToronto() {
  const { go } = useRoute();
  return (
    <article className="card" style={{
      padding: 0, overflow: "hidden", display: "grid",
      gridTemplateColumns: "1.15fr 1fr", minHeight: 480
    }}>
      <div style={{ padding: "44px 44px 44px", display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 24 }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
            <AppIcon size={62} />
            <div>
              <div style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 22, letterSpacing: "-.01em" }}>Toronto Events</div>
              <div className="mono" style={{ fontSize: 11, color: "var(--mist)", letterSpacing: ".14em", textTransform: "uppercase", marginTop: 4 }}>iOS · Free · Canadian-made</div>
            </div>
          </div>

          <h3 className="h3" style={{ marginBottom: 14, maxWidth: 460 }}>
            Discover what's happening in Toronto — without the noise.
          </h3>
          <p style={{ color: "var(--ink-2)", fontSize: 16, lineHeight: 1.6, maxWidth: 480 }}>
            A clean, fast browser for everything the city is doing this week.
            Filter by category, save favourites, and get smart reminders — powered by
            City of Toronto Open Data. No accounts, no tracking, ever.
          </p>
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
          <button className="btn btn-primary" onClick={() => go("toronto-events")}>
            Learn more <span className="arr">→</span>
          </button>
          <span className="as-badge soon">
            <span>
              <div className="top">Coming soon on the</div>
              <div className="bot">App Store</div>
            </span>
          </span>
        </div>
      </div>

      <div style={{
        background: "linear-gradient(160deg, #0A0A0B 0%, #1C1C1F 100%)",
        position: "relative", overflow: "hidden",
        display: "flex", alignItems: "center", justifyContent: "center",
        color: "var(--paper)"
      }}>
        <TatamiBG opacity={0.06} />
        <div style={{ position: "absolute", top: 28, left: 28, display: "flex", alignItems: "center", gap: 10 }}>
          <span className="label" style={{ color: "color-mix(in oklab, var(--paper) 50%, transparent)" }}>K-001 / 01</span>
        </div>
        <div style={{ position: "absolute", top: 24, right: 28 }}>
          <Hanko size={48}>東</Hanko>
        </div>
        <PhoneMock />
        <div style={{ position: "absolute", bottom: 28, left: 28, fontFamily: "var(--mono)", fontSize: 11, color: "color-mix(in oklab, var(--paper) 50%, transparent)", letterSpacing: ".14em" }}>
          TORONTO · 43.65°N 79.38°W
        </div>
      </div>
    </article>
  );
}

function AppIcon({ size = 62, rounded = true }) {
  return (
    <div style={{
      width: size, height: size,
      borderRadius: rounded ? size * 0.23 : 8,
      background: "linear-gradient(160deg, var(--ink) 0%, #1C1C1F 100%)",
      display: "flex", alignItems: "center", justifyContent: "center",
      boxShadow: "0 8px 20px -6px rgba(10,10,11,.4), 0 0 0 .5px rgba(255,255,255,.05) inset",
      position: "relative", overflow: "hidden", flexShrink: 0
    }}>
      <KaijuMark size={size * 0.6} tone="ink" />
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(80% 60% at 50% 0%, color-mix(in oklab, var(--vermillion) 30%, transparent) 0%, transparent 70%)", pointerEvents: "none" }} />
    </div>
  );
}

// Tiny phone mock showing the Toronto Events UI — original UI design
function PhoneMock() {
  return (
    <div className="iphone">
      <div className="iphone-screen">
        <PhoneAppUI />
      </div>
    </div>
  );
}

function PhoneAppUI() {
  const events = [
    { day: "FRI 23", time: "19:00", title: "Night Market at Stackt", cat: "Food", color: "var(--vermillion)" },
    { day: "SAT 24", time: "10:00", title: "Trinity Bellwoods Run Club", cat: "Sport", color: "var(--ink)" },
    { day: "SAT 24", time: "14:00", title: "Open Streets — Bloor West", cat: "City", color: "var(--ink)" },
    { day: "SUN 25", time: "13:00", title: "AGO Free Sundays", cat: "Art", color: "var(--ink)" },
    { day: "SUN 25", time: "19:30", title: "Harbourfront Open Mic", cat: "Music", color: "var(--ink)" },
  ];
  return (
    <div style={{ height: "100%", overflow: "hidden", display: "flex", flexDirection: "column", background: "var(--paper)", color: "var(--ink)" }}>
      {/* status bar fake */}
      <div style={{ height: 44, paddingTop: 14, display: "flex", justifyContent: "space-between", padding: "14px 22px 0", fontSize: 12, fontFamily: "var(--mono)" }}>
        <span>9:41</span><span>● ● ●</span>
      </div>
      <div style={{ padding: "30px 18px 12px" }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: ".16em", color: "var(--mist)" }}>THIS WEEKEND</div>
        <div style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: 26, letterSpacing: "-.02em", lineHeight: 1, marginTop: 4 }}>
          47 events<br/><span style={{ color: "var(--vermillion)" }}>in Toronto</span>
        </div>
      </div>
      {/* chips */}
      <div style={{ display: "flex", gap: 6, padding: "6px 18px 14px", overflow: "hidden" }}>
        {["All", "Free", "Music", "Food", "Art"].map((c, i) => (
          <span key={c} style={{
            fontSize: 11, padding: "4px 10px", borderRadius: 999,
            background: i === 0 ? "var(--ink)" : "transparent",
            color: i === 0 ? "var(--paper)" : "var(--ink-2)",
            border: "1px solid " + (i === 0 ? "var(--ink)" : "var(--line)"),
            whiteSpace: "nowrap"
          }}>{c}</span>
        ))}
      </div>
      <div style={{ flex: 1, overflow: "hidden", padding: "0 14px" }}>
        {events.map((e, i) => (
          <div key={i} style={{
            display: "flex", gap: 10, padding: "10px 6px",
            borderBottom: i < events.length - 1 ? "1px solid var(--line)" : "0",
            alignItems: "center"
          }}>
            <div style={{
              width: 40, flexShrink: 0, textAlign: "center",
              padding: "4px 2px", borderRight: "1px solid var(--line)"
            }}>
              <div className="mono" style={{ fontSize: 8.5, color: "var(--mist)", letterSpacing: ".08em" }}>{e.day.split(" ")[0]}</div>
              <div style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: 16, lineHeight: 1, color: e.color }}>{e.day.split(" ")[1]}</div>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 11.5, fontWeight: 600, lineHeight: 1.2, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{e.title}</div>
              <div className="mono" style={{ fontSize: 9, color: "var(--mist)", marginTop: 2, letterSpacing: ".06em" }}>{e.time} · {e.cat.toUpperCase()}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// -------------------------------------------------------------- ABOUT
function AboutPage() {
  const { go } = useRoute();
  return (
    <main className="page" data-screen-label="03 About">
      <section style={{ paddingTop: 64 }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 32 }}>
            <span className="dot"></span><span>About the studio</span>
          </div>

          <h1 className="hero-title" style={{ maxWidth: 920, marginBottom: 36 }}>
            A studio for <span style={{ color: "var(--vermillion)" }}>quiet monsters</span> —
            small apps with outsized care.
          </h1>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, marginTop: 64, alignItems: "start" }}>
            <aside style={{ position: "sticky", top: 88, display: "flex", flexDirection: "column", gap: 20 }}>
              <Lockup size="md" />
              <div className="rule" />
              <dl style={{ margin: 0 }}>
                <SpecMini k="Entity" v="Kaiju Labs Inc." />
                <SpecMini k="Founded" v="2026" />
                <SpecMini k="HQ" v="Ontario, Canada" />
                <SpecMini k="Size" v="Tiny on purpose" />
                <SpecMini k="Platform" v="iOS · macOS" />
              </dl>
              <div className="rule" />
              <a href="mailto:hello@kaijulabs.ca" className="mono" style={{ color: "var(--vermillion)", fontSize: 13 }}>
                hello@kaijulabs.ca →
              </a>
            </aside>

            <div className="prose" style={{ maxWidth: "none" }}>
              <p>
                <strong>Kaiju Labs is a Canadian software studio</strong> based in Ontario, building
                mobile apps for the cities and communities we actually live in. We started in 2026
                with a simple thesis: the most useful software is small, slow-cooked, and
                deeply local.
              </p>
              <p>
                Our focus is on tools that help people <strong>explore the places around them</strong> —
                events, neighbourhoods, civic data, transit, weather, the texture of a city.
                Tools we wished existed, and that we'd happily use ourselves.
              </p>

              <h2>What we believe</h2>
              <p>
                Privacy is the default, not a feature. Our apps don't have accounts, don't run
                analytics, and don't ship with third-party SDKs. Your data stays on your device,
                full stop. We think this should be unremarkable — and one day, it will be.
              </p>
              <p>
                We believe in open data: <a href="https://open.toronto.ca/" target="_blank" rel="noopener">the City of Toronto's open portal</a>,
                Statistics Canada, OpenStreetMap, the long tradition of civic information being
                a public good. Our apps are mostly thoughtful interfaces on top of that work.
              </p>
              <p>
                And we believe in shipping small. A polished app that does one thing well, that
                a thousand people quietly love, is more meaningful than a platform that ten million
                people barely tolerate.
              </p>

              <h2>The kaiju thing</h2>
              <p>
                The name is a wink. <em>Kaiju</em> (怪獣) is Japanese for "strange beast" — the
                towering monsters of Toho cinema. Our apps are the opposite of towering: they're
                small, quiet, and useful. The studio is the lab where the monsters are made and,
                eventually, gently unleashed onto the world.
              </p>
              <p>
                The brand draws from Japanese minimalism — hanko stamps, ink and paper, the
                vermillion of a Shinto torii — paired with the structural restraint of Apple
                marketing pages. Beautiful, calm, slightly mischievous.
              </p>

              <h2>Get in touch</h2>
              <p>
                We're a one-of-one team. Press, partnerships, civic data folks, indie developers,
                and people with kind notes are all very welcome to write to us at <a href="mailto:hello@kaijulabs.ca">hello@kaijulabs.ca</a>.
                For app-specific questions, use <a href="mailto:support@kaijulabs.ca">support@kaijulabs.ca</a>.
              </p>
            </div>
          </div>

          <div style={{ marginTop: 96, padding: "48px 0", borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 20, alignItems: "center" }}>
            <span className="mono" style={{ color: "var(--mist)", letterSpacing: ".18em", textTransform: "uppercase", fontSize: 11 }}>
              Currently building
            </span>
            <h3 className="h3" style={{ margin: 0 }}>Toronto Events — discover the city.</h3>
            <button className="btn btn-primary" onClick={() => go("toronto-events")}>
              See the app <span className="arr">→</span>
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

function SpecMini({ k, v }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", gap: 12, padding: "8px 0", borderBottom: "1px solid var(--line)" }}>
      <span className="mono" style={{ fontSize: 11, color: "var(--mist)", letterSpacing: ".14em", textTransform: "uppercase" }}>{k}</span>
      <span style={{ fontSize: 13, color: "var(--ink)" }}>{v}</span>
    </div>
  );
}

// -------------------------------------------------------------- CONTACT
function ContactPage() {
  return (
    <main className="page" data-screen-label="06 Contact">
      <section style={{ padding: "64px 0 0" }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 32 }}>
            <span className="dot"></span><span>Get in touch</span>
          </div>
          <h1 className="hero-title" style={{ maxWidth: 920, marginBottom: 28 }}>
            Write to us.<br/>
            <span style={{ color: "var(--mist)" }}>We're a small studio — we read everything.</span>
          </h1>
          <p className="lead" style={{ maxWidth: 600, marginBottom: 56 }}>
            Whether you've found a bug in one of our apps, want to talk about a partnership,
            or just want to say hi — pick the right address below.
          </p>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginTop: 32 }}>
            <ContactCard
              label="General"
              email="hello@kaijulabs.ca"
              body="Press, partnerships, civic data collaborations, indie dev hellos."
              hanko="怪"
            />
            <ContactCard
              label="App Support"
              email="support@kaijulabs.ca"
              body="Bug reports, feature requests, anything broken in our apps."
              hanko="獣"
              accent
            />
            <ContactCard
              label="Privacy & Legal"
              email="privacy@kaijulabs.ca"
              body="Privacy questions, GDPR/PIPEDA requests, legal correspondence."
              hanko="律"
            />
          </div>

          <div className="card" style={{ marginTop: 64, padding: "32px 36px", display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center" }}>
            <div>
              <span className="label">Mailing address</span>
              <p style={{ marginTop: 8, fontSize: 16, lineHeight: 1.5 }}>
                Kaiju Labs Inc.<br/>
                Ontario, Canada<br/>
                <span style={{ color: "var(--mist)", fontFamily: "var(--mono)", fontSize: 12 }}>(physical address available on request)</span>
              </p>
            </div>
            <Hanko size={72} rotate={-6}>所</Hanko>
          </div>
        </div>
      </section>
    </main>
  );
}

function ContactCard({ label, email, body, hanko, accent }) {
  return (
    <div className="card" style={{
      padding: "26px 24px", display: "flex", flexDirection: "column", gap: 16,
      ...(accent ? { background: "var(--ink)", color: "var(--paper)" } : {})
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <span className="label" style={accent ? { color: "color-mix(in oklab, var(--paper) 55%, transparent)" } : {}}>{label}</span>
        <Hanko size={36} rotate={-3}>{hanko}</Hanko>
      </div>
      <p style={{ fontSize: 14, lineHeight: 1.55, color: accent ? "color-mix(in oklab, var(--paper) 75%, transparent)" : "var(--ink-2)" }}>{body}</p>
      <a href={`mailto:${email}`} style={{
        fontFamily: "var(--mono)", fontSize: 13,
        color: accent ? "var(--paper)" : "var(--vermillion)",
        borderBottom: "1px solid currentColor", alignSelf: "flex-start", paddingBottom: 2,
        marginTop: "auto"
      }}>{email} →</a>
    </div>
  );
}

// -------------------------------------------------------------- PRODUCTS
function ProductsPage() {
  const { go } = useRoute();
  return (
    <main className="page" data-screen-label="02 Products">
      <section style={{ padding: "64px 0 0" }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 32 }}>
            <span className="dot"></span><span>Products</span>
            <span style={{ flex: 1 }}></span>
            <span className="mono" style={{ color: "var(--mist)" }}>01 / 01 shipped</span>
          </div>

          <h1 className="hero-title" style={{ maxWidth: 920, marginBottom: 56 }}>
            One app today.<br/>
            <span style={{ color: "var(--mist)" }}>More slowly cooked in the lab.</span>
          </h1>

          <FeaturedToronto />

          {/* coming soon slots */}
          <div style={{ marginTop: 48 }}>
            <div className="eyebrow" style={{ marginBottom: 18 }}>
              <span className="label" style={{ color: "var(--ink-2)" }}>In the lab</span>
              <span className="rule" style={{ flex: 1 }} />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
              {[
                { id: "K-002", title: "Untitled · transit", line: "Subway, streetcar, and bus — when they're actually here." },
                { id: "K-003", title: "Untitled · weather", line: "Hyper-local microclimates for the city you live in." },
                { id: "K-004", title: "Untitled · ???", line: "Quiet experiments, slowly approaching." },
              ].map(p => (
                <div key={p.id} className="card" style={{ padding: 24, opacity: .7 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 16 }}>
                    <span className="label">{p.id}</span>
                    <span className="mono" style={{ fontSize: 10, color: "var(--mist)", letterSpacing: ".14em", textTransform: "uppercase" }}>Concept</span>
                  </div>
                  <div style={{ width: 48, height: 48, borderRadius: 10, background: "repeating-linear-gradient(45deg, var(--paper-2) 0 8px, var(--paper) 8px 16px)", border: "1px solid var(--line)", marginBottom: 18 }} />
                  <div style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 17, marginBottom: 6 }}>{p.title}</div>
                  <div style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.5 }}>{p.line}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { HomePage, AboutPage, ContactPage, ProductsPage, AppIcon, PhoneMock, PhoneAppUI, FeaturedToronto });