// pages-product.jsx — Toronto Events product page

function TorontoEventsPage() {
  const { go } = useRoute();
  return (
    <main className="page" data-screen-label="04 Toronto Events">

      {/* HERO ─────────────────────────────────────────────────── */}
      <section style={{ paddingTop: 56, position: "relative", overflow: "hidden" }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 28 }}>
            <span className="mono" style={{ color: "var(--vermillion)" }}>K-001 / 01</span>
            <span>·</span>
            <span>iOS · iPadOS</span>
            <span style={{ flex: 1 }} />
            <span style={{ color: "var(--mist)" }}>From the Kaiju Labs studio</span>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 80, alignItems: "center" }}>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 18, marginBottom: 28 }}>
                <AppIcon size={92} />
                <div>
                  <h1 style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: 44, letterSpacing: "-.02em", lineHeight: 1 }}>
                    Toronto Events
                  </h1>
                  <div className="mono" style={{ fontSize: 12, color: "var(--mist)", letterSpacing: ".14em", textTransform: "uppercase", marginTop: 8 }}>
                    Discover what's happening in Toronto
                  </div>
                </div>
              </div>

              <p className="lead" style={{ maxWidth: 540, marginBottom: 36 }}>
                A calm, fast browser for everything the city is doing — concerts, markets,
                open streets, library nights, the small free things that make a city worth
                living in. Powered by City of Toronto Open Data.
              </p>

              <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 28 }}>
                <span className="as-badge soon">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 12.04c-.03-3 2.44-4.43 2.55-4.5-1.39-2.03-3.55-2.31-4.32-2.34-1.84-.19-3.59 1.08-4.52 1.08-.94 0-2.38-1.06-3.91-1.03-2.01.03-3.87 1.17-4.91 2.96-2.09 3.63-.54 9 1.5 11.94.99 1.45 2.18 3.06 3.74 3 1.5-.06 2.07-.97 3.88-.97 1.81 0 2.32.97 3.91.94 1.61-.03 2.63-1.47 3.61-2.93 1.13-1.68 1.6-3.32 1.62-3.4-.04-.02-3.12-1.2-3.15-4.75M14.46 3.62c.83-1 1.39-2.4 1.24-3.79-1.2.05-2.65.8-3.5 1.8-.77.89-1.44 2.31-1.26 3.67 1.34.11 2.7-.68 3.52-1.68"/></svg>
                  <span>
                    <div className="top">Coming soon on the</div>
                    <div className="bot">App Store</div>
                  </span>
                </span>
                <button className="btn" onClick={() => { const el = document.getElementById('features'); el && el.scrollIntoView({ behavior: 'smooth' }); }}>
                  Features ↓
                </button>
              </div>

              <div style={{ display: "flex", gap: 28, flexWrap: "wrap", marginTop: 32, paddingTop: 22, borderTop: "1px solid var(--line)" }}>
                <Stat k="Source" v="Open Data" />
                <Stat k="Accounts" v="None" accent />
                <Stat k="Tracking" v="None" accent />
                <Stat k="Price" v="Free" />
              </div>
            </div>

            {/* big phone */}
            <div style={{ position: "relative", display: "flex", justifyContent: "center", alignItems: "center", minHeight: 600 }}>
              <div style={{ position: "absolute", width: 380, height: 380, borderRadius: "50%", background: "radial-gradient(circle, color-mix(in oklab, var(--vermillion) 22%, transparent) 0%, transparent 70%)", filter: "blur(8px)" }} />
              <div style={{ transform: "rotate(-3deg)", position: "relative", zIndex: 1 }}>
                <div className="iphone" style={{ width: 300, height: 610 }}>
                  <div className="iphone-screen">
                    <PhoneAppUI />
                  </div>
                </div>
              </div>
              <div style={{ position: "absolute", top: 0, right: 0, transform: "translateY(-10%)" }}>
                <Hanko size={88} rotate={6}>東</Hanko>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FEATURE GRID ─────────────────────────────────────────── */}
      <section id="features" style={{ paddingTop: 120 }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 22 }}>
            <span className="label" style={{ color: "var(--ink-2)" }}>Features</span>
            <span className="rule" style={{ flex: 1 }} />
            <span className="mono" style={{ color: "var(--mist)" }}>04 essentials</span>
          </div>

          <h2 className="h2" style={{ maxWidth: 760, marginBottom: 56 }}>
            Built to be useful in <span style={{ color: "var(--vermillion)" }}>thirty seconds</span> —
            not to keep you scrolling.
          </h2>

          <div className="feat-grid">
            <FeatureCell
              span={6}
              num="01"
              kanji="日"
              title="Browse by day, week, or month"
              body="Three timeframes, one tap apart. See what's tonight, what's this weekend, or plan the whole month at a glance — without infinite-scrolling for it."
              visual={<DayWeekMonthVisual />}
            />
            <FeatureCell
              span={6}
              num="02"
              kanji="絞"
              title="Filter by category"
              body="Music, food, art, sport, family, free things, late-night things. Stack filters or strip them away — the list rebuilds instantly."
              visual={<FilterChipsVisual />}
            />
            <FeatureCell
              span={6}
              num="03"
              kanji="★"
              title="Save your favourites"
              body="Long-press to keep an event. Your saved list lives on your device only — no account, no cloud sync that we could read."
              visual={<FavouritesVisual />}
            />
            <FeatureCell
              span={6}
              num="04"
              kanji="鈴"
              title="Smart reminders"
              body="Get a quiet nudge an hour before. Reminders are scheduled locally with iOS — they never leave your phone, and they never become marketing."
              visual={<RemindersVisual />}
            />
          </div>
        </div>
      </section>

      {/* PRIVACY CALLOUT ──────────────────────────────────────── */}
      <section style={{ paddingTop: 120 }}>
        <div className="wrap">
          <div className="card card-dark" style={{ padding: "64px 56px", position: "relative", overflow: "hidden" }}>
            <TatamiBG opacity={0.08} />
            <div style={{ position: "absolute", top: 28, right: 32 }}>
              <Hanko size={56} rotate={-4}>無</Hanko>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "center", position: "relative", zIndex: 1 }}>
              <div>
                <span className="label" style={{ color: "color-mix(in oklab, var(--paper) 55%, transparent)" }}>The privacy stance</span>
                <h2 className="h2" style={{ color: "var(--paper)", marginTop: 12, marginBottom: 22, maxWidth: 540 }}>
                  Toronto Events collects <span style={{ color: "var(--vermillion)" }}>zero</span> personal data.
                </h2>
                <p style={{ color: "color-mix(in oklab, var(--paper) 80%, transparent)", fontSize: 17, lineHeight: 1.6, maxWidth: 540 }}>
                  No accounts. No analytics. No third-party SDKs. No telemetry of any kind.
                  Your favourites, filters, and reminders are stored on your device with
                  iOS-native storage — and never sent anywhere. We genuinely have nothing
                  to lose, because we collect nothing.
                </p>
                <button className="btn" onClick={() => go("privacy")}
                  style={{ marginTop: 28, background: "var(--paper)", color: "var(--ink)", border: "1px solid var(--paper)" }}>
                  Read the privacy policy <span className="arr">→</span>
                </button>
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                {[
                  ["Accounts", "None"],
                  ["Tracking", "None"],
                  ["Analytics", "None"],
                  ["Third-party SDKs", "None"],
                  ["Server storage", "None"],
                  ["Ads", "Never"],
                ].map(([k, v]) => (
                  <div key={k} style={{
                    border: "1px solid color-mix(in oklab, var(--paper) 18%, transparent)",
                    borderRadius: 12, padding: "16px 18px"
                  }}>
                    <div className="label" style={{ color: "color-mix(in oklab, var(--paper) 50%, transparent)", fontSize: 9.5 }}>{k}</div>
                    <div style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: 22, marginTop: 6, color: "var(--vermillion)" }}>{v}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* DATA SOURCE ──────────────────────────────────────────── */}
      <section style={{ paddingTop: 96 }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 64, alignItems: "center" }}>
            <div>
              <span className="label">Built on open data</span>
              <h2 className="h2" style={{ marginTop: 16 }}>
                Powered by the <br/>City of Toronto.
              </h2>
              <p style={{ marginTop: 18, fontSize: 16, lineHeight: 1.6, color: "var(--ink-2)", maxWidth: 460 }}>
                Event data comes from the City of Toronto's Open Data portal — a free,
                public dataset published by the city itself. Toronto Events is a thoughtful
                interface on top of that civic work.
              </p>
              <a href="https://open.toronto.ca/" target="_blank" rel="noopener" className="mono"
                style={{ display: "inline-block", marginTop: 22, color: "var(--vermillion)", borderBottom: "1px solid currentColor", paddingBottom: 2, fontSize: 13 }}>
                open.toronto.ca →
              </a>
            </div>

            <PlaceholderImage label="MAP / SCREENSHOTS COMING POST-LAUNCH" aspect="16 / 10" />
          </div>
        </div>
      </section>

      {/* SUPPORT ─────────────────────────────────────────────── */}
      <section id="support" style={{ paddingTop: 96 }}>
        <div className="wrap">
          <div className="card" style={{ padding: "48px 44px", display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 56, alignItems: "center" }}>
            <div>
              <span className="label">Support</span>
              <h2 className="h2" style={{ marginTop: 12, marginBottom: 18 }}>
                Questions? Bugs?<br/>
                <span style={{ color: "var(--mist)" }}>Write to a human.</span>
              </h2>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--ink-2)", maxWidth: 480 }}>
                Toronto Events is made by a small team — when you email support, a real person
                reads it, usually within a day or two. No ticket numbers, no bots, no escalation
                trees.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <a href="mailto:support@kaijulabs.ca" className="btn btn-primary" style={{ justifyContent: "space-between" }}>
                <span>support@kaijulabs.ca</span>
                <span className="arr">→</span>
              </a>
              <a href="mailto:privacy@kaijulabs.ca" className="btn" style={{ justifyContent: "space-between" }}>
                <span>privacy@kaijulabs.ca</span>
                <span className="arr">→</span>
              </a>
              <div className="mono" style={{ fontSize: 11, color: "var(--mist)", letterSpacing: ".12em", marginTop: 6 }}>
                Avg. response time: 1–2 business days
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function Stat({ k, v, accent }) {
  return (
    <div>
      <div className="label" style={{ marginBottom: 4 }}>{k}</div>
      <div style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 22, letterSpacing: "-.01em", color: accent ? "var(--vermillion)" : "var(--ink)" }}>{v}</div>
    </div>
  );
}

function FeatureCell({ span = 6, num, kanji, title, body, visual }) {
  return (
    <div style={{ gridColumn: `span ${span}`, display: "flex", flexDirection: "column", gap: 24, minHeight: 380 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: ".14em", color: "var(--mist)" }}>FEATURE — {num}</div>
        <span style={{ fontFamily: "var(--serif)", fontWeight: 700, color: "var(--vermillion)", fontSize: 26, lineHeight: 1 }}>{kanji}</span>
      </div>

      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 180 }}>
        {visual}
      </div>

      <div>
        <h3 style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 22, letterSpacing: "-.015em", marginBottom: 10 }}>
          {title}
        </h3>
        <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 440 }}>{body}</p>
      </div>
    </div>
  );
}

// Visuals --------------------------------------------------------
function DayWeekMonthVisual() {
  return (
    <div style={{ display: "flex", gap: 6, alignItems: "stretch" }}>
      {["DAY", "WEEK", "MONTH"].map((k, i) => (
        <div key={k} style={{
          padding: "16px 18px", borderRadius: 12,
          border: "1px solid " + (i === 1 ? "var(--ink)" : "var(--line)"),
          background: i === 1 ? "var(--ink)" : "transparent",
          color: i === 1 ? "var(--paper)" : "var(--ink-2)",
          fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase",
          display: "flex", flexDirection: "column", gap: 6, minWidth: 78
        }}>
          <span>{k}</span>
          <span style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: 22, letterSpacing: "-.01em", textTransform: "none", color: i === 1 ? "var(--vermillion)" : "var(--ink)" }}>
            {i === 0 ? "12" : i === 1 ? "47" : "184"}
          </span>
        </div>
      ))}
    </div>
  );
}

function FilterChipsVisual() {
  const chips = [
    ["All", true], ["Free", false], ["Music", true],
    ["Food", false], ["Art", false], ["Sport", false], ["Family", false]
  ];
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 6, justifyContent: "center", maxWidth: 280 }}>
      {chips.map(([c, on], i) => (
        <span key={c} style={{
          fontSize: 11.5, padding: "5px 12px", borderRadius: 999,
          background: on ? "var(--ink)" : "transparent",
          color: on ? "var(--paper)" : "var(--ink-2)",
          border: "1px solid " + (on ? "var(--ink)" : "var(--line)"),
          fontFamily: "var(--mono)", letterSpacing: ".06em"
        }}>{c}</span>
      ))}
    </div>
  );
}

function FavouritesVisual() {
  return (
    <div style={{ position: "relative", width: 220, height: 140 }}>
      {[0, 1, 2].map(i => (
        <div key={i} style={{
          position: "absolute", left: i * 8, top: i * 10,
          width: 200, padding: "12px 14px", borderRadius: 10,
          background: i === 0 ? "var(--ink)" : "var(--paper)",
          color: i === 0 ? "var(--paper)" : "var(--ink)",
          border: "1px solid " + (i === 0 ? "var(--ink)" : "var(--line)"),
          display: "flex", justifyContent: "space-between", alignItems: "center",
          fontSize: 12
        }}>
          <span>{["Night Market", "Open Mic", "Free Sunday"][i]}</span>
          <span style={{ color: i === 0 ? "var(--vermillion)" : "var(--mist)" }}>★</span>
        </div>
      ))}
    </div>
  );
}

function RemindersVisual() {
  return (
    <div style={{ width: 240, padding: 14, borderRadius: 14, background: "var(--ink)", color: "var(--paper)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
        <span style={{ fontFamily: "var(--mono)", fontSize: 9.5, color: "color-mix(in oklab, var(--paper) 55%, transparent)", letterSpacing: ".14em" }}>NOTIFICATION · 18:00</span>
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--vermillion)" }} />
      </div>
      <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>Night Market at Stackt</div>
      <div style={{ fontSize: 11, color: "color-mix(in oklab, var(--paper) 65%, transparent)" }}>Starts in 1 hour · 19:00</div>
    </div>
  );
}

Object.assign(window, { TorontoEventsPage });