/* Upcoming / Coming Soon page */

function UpcomingPage({ go }) {
  const upcoming = [
    {
      num: "Coming Q2 2027",
      tag: "Scan",
      title: "Scan UPC codes to add items.",
      body: "Point your phone or webcam at a barcode and My Crafty Stash will fill in the manufacturer, item name, and item number for you. New supplies go from package to catalog in about three seconds.",
      bullets: [
        "Webcam scanning on Windows",
        "Companion mobile app for phone scanning",
        "Auto-fill manufacturer, name, item number",
      ],
      visual: "scan",
    },
    {
      num: "Coming Q3 2026",
      tag: "Auto-images",
      title: "Pull product images automatically.",
      body: "When you add a stamp set or die from a recognized brand, the catalog will pull a clean product photo for you. No more setting up a tabletop studio just to log a single set.",
      bullets: [
        "Pulls images from official manufacturer catalogs",
        "Replaceable with your own photos any time",
        "Supports the brands paper crafters love most",
      ],
      visual: "brands",
    },
  ];
  const shipped = [
    {
      num: "Shipped · June 2026",
      tag: "Cloud Sync",
      title: "Your stash, on your phone.",
      body: "This one's live. Turn on Cloud Sync in Settings, sign in on the web with Google, and your full collection is there in a searchable photo grid — in the craft store, at a crop, anywhere. The desktop app stays the source of truth; the web view is a read-only mirror.",
      bullets: [
        "Web view of your full collection — live now",
        "Searchable photo grid, tap any item for details",
        "Optional and opt-in — the app still works fully offline",
      ],
      visual: "cloud",
    },
    {
      num: "Shipped · June 2026",
      tag: "Updates",
      title: "The app updates itself.",
      body: "My Crafty Stash now checks for new releases when it starts, and if there's one you want, it downloads the installer with a progress bar and launches it for you. After each update, a What's New popup shows you what changed.",
      bullets: [
        "One-click updates, no hunting for installers",
        "What's New notes after every update",
        "Say no and keep working — it never forces you",
      ],
      visual: "updates",
    },
  ];
  const renderFeature = (f, i) => (
              <div key={i} style={{
                display: "grid",
                gridTemplateColumns: "1.1fr 1fr",
                gap: 48,
                alignItems: "center",
                background: "var(--paper)",
                border: "1px solid var(--line-soft)",
                borderRadius: 14,
                padding: 32,
              }} className="upcoming-row">
                <div>
                  <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 16 }}>
                    <span className="kicker" style={{ color: "var(--accent-deep)" }}>{f.tag}</span>
                    <span style={{ width: 4, height: 4, borderRadius: 99, background: "var(--ink-3)" }} />
                    <span className="kicker">{f.num}</span>
                  </div>
                  <h3 style={{ fontSize: "1.6rem", marginBottom: 14 }}>{f.title}</h3>
                  <p style={{ color: "var(--ink-2)", margin: "0 0 18px", fontSize: "1rem", lineHeight: 1.6, maxWidth: 520 }}>{f.body}</p>
                  <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                    {f.bullets.map((b, j) => (
                      <li key={j} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: "0.95rem", color: "var(--ink-2)" }}>
                        <span style={{ width: 14, height: 14, borderRadius: 4, background: "var(--accent-soft)", border: "1px solid var(--accent)", marginTop: 3, flexShrink: 0, position: "relative" }}>
                          <span style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", color: "var(--accent-deep)", fontSize: 10, fontWeight: 700 }}>✓</span>
                        </span>
                        {b}
                      </li>
                    ))}
                  </ul>
                </div>
                <div>
                  {f.visual === "cloud" && <CloudVisual />}
                  {f.visual === "scan" && <ScanVisual />}
                  {f.visual === "brands" && <BrandsVisual />}
                  {f.visual === "updates" && <UpdatesVisual />}
                </div>
              </div>
  );

  return (
    <div className="page" data-screen-label="07 Upcoming">
      <section className="section" style={{ paddingTop: 64 }}>
        <div className="container">
          <div style={{ marginBottom: 56, maxWidth: 760 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Coming soon</div>
            <h1 style={{ marginBottom: 22 }}>What's on the workbench.</h1>
            <p className="lead">
              What's coming next to My Crafty Stash — and what just landed. When
              something ships, the app tells you itself: it offers each new
              update with a What's New summary.
            </p>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {upcoming.map(renderFeature)}
          </div>

          <div className="section-head" style={{ marginTop: 72, marginBottom: 24 }}>
            <div className="eyebrow">Fresh off the workbench</div>
            <h2>Recently shipped.</h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {shipped.map(renderFeature)}
          </div>
        </div>
      </section>
    </div>
  );
}

/* Mini mock of the in-app update prompt + progress bar. */
function UpdatesVisual() {
  return (
    <div style={{ background: "var(--paper-2)", border: "1px solid var(--line-soft)", borderRadius: 14, padding: 22 }}>
      <div style={{ background: "var(--paper)", border: "1px solid var(--line-soft)", borderRadius: 10, padding: "16px 18px", marginBottom: 12 }}>
        <div className="kicker" style={{ marginBottom: 8 }}>Update available</div>
        <div style={{ fontFamily: "var(--display-font)", fontWeight: 600, marginBottom: 4 }}>A new version is ready.</div>
        <div style={{ fontFamily: "var(--mono-font)", fontSize: 11, color: "var(--ink-3)" }}>installed 1.0.2.11 · available 1.0.2.12</div>
      </div>
      <div style={{ background: "var(--paper)", border: "1px solid var(--line-soft)", borderRadius: 10, padding: "14px 18px" }}>
        <div className="kicker" style={{ marginBottom: 10 }}>Downloading…</div>
        <div style={{ height: 8, background: "var(--paper-3)", borderRadius: 99, overflow: "hidden", marginBottom: 8 }}>
          <div style={{ height: "100%", width: "72%", background: "var(--accent)" }} />
        </div>
        <div style={{ fontFamily: "var(--mono-font)", fontSize: 11, color: "var(--ink-3)" }}>53.1 of 73.8 MB</div>
      </div>
    </div>
  );
}

function CloudVisual() {
  return (
    <div style={{ background: "var(--paper-2)", border: "1px solid var(--line-soft)", borderRadius: 14, padding: 22, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, alignItems: "center" }}>
      <div style={{ background: "var(--paper)", border: "1px solid var(--line-soft)", borderRadius: 10, padding: "14px 12px" }}>
        <div className="kicker" style={{ marginBottom: 10 }}>Desktop</div>
        <div style={{ height: 6, background: "var(--ink)", borderRadius: 3, marginBottom: 6, width: "70%" }} />
        <div style={{ height: 6, background: "var(--line-soft)", borderRadius: 3, marginBottom: 6 }} />
        <div style={{ height: 6, background: "var(--line-soft)", borderRadius: 3, marginBottom: 12, width: "85%" }} />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
          <div style={{ aspectRatio: "1", background: "var(--mint)", borderRadius: 4 }} />
          <div style={{ aspectRatio: "1", background: "var(--butter)", borderRadius: 4 }} />
        </div>
      </div>
      <div style={{ textAlign: "center" }}>
        <div style={{ width: 56, height: 36, background: "var(--accent)", borderRadius: 18, margin: "0 auto", display: "grid", placeItems: "center", color: "var(--paper)", fontSize: 18 }}>☁</div>
        <div className="kicker" style={{ marginTop: 8, color: "var(--accent-deep)" }}>encrypted sync</div>
      </div>
      <div style={{ background: "var(--paper)", border: "1px solid var(--line-soft)", borderRadius: 10, padding: "12px 10px", gridColumn: "2", marginTop: -8 }}>
        <div className="kicker" style={{ marginBottom: 8, fontSize: 9 }}>iPhone</div>
        <div style={{ height: 5, background: "var(--ink)", borderRadius: 3, marginBottom: 5, width: "65%" }} />
        <div style={{ height: 5, background: "var(--line-soft)", borderRadius: 3, marginBottom: 8 }} />
        <div style={{ aspectRatio: "1.4", background: "var(--lilac)", borderRadius: 4 }} />
      </div>
    </div>
  );
}

function ScanVisual() {
  return (
    <div style={{ background: "var(--ink)", borderRadius: 14, padding: 22, display: "flex", flexDirection: "column", gap: 14, color: "var(--paper)" }}>
      <div style={{ background: "var(--paper-2)", borderRadius: 10, padding: "20px 24px", position: "relative", overflow: "hidden" }}>
        <div className="kicker" style={{ marginBottom: 10, color: "var(--ink-3)" }}>UPC · barcode</div>
        <div style={{ display: "flex", gap: 2, alignItems: "stretch", height: 56 }}>
          {[3,1,2,1,3,2,1,3,1,2,3,1,2,1,3,2,1,3,2,1,2,3,1,2,1,3,2,1,3].map((w, i) => (
            <div key={i} style={{ width: w, background: i % 2 === 0 ? "var(--ink)" : "transparent" }} />
          ))}
        </div>
        <div style={{ position: "absolute", left: 0, right: 0, top: "50%", height: 2, background: "var(--accent)", boxShadow: "0 0 12px var(--accent)" }} />
        <div style={{ marginTop: 10, fontFamily: "var(--mono-font)", fontSize: 12, color: "var(--ink-2)" }}>0 71831 02104 7</div>
      </div>
      <div style={{ background: "rgba(250,247,241,.08)", border: "1px solid rgba(250,247,241,.15)", borderRadius: 10, padding: "14px 16px" }}>
        <div className="kicker" style={{ marginBottom: 8, color: "var(--paper-3)" }}>Auto-detected</div>
        <div style={{ fontFamily: "var(--display-font)", fontSize: "1.05rem", fontWeight: 600 }}>Floral Wishes</div>
        <div style={{ fontFamily: "var(--mono-font)", fontSize: 11, color: "var(--paper-3)", marginTop: 4 }}>MFT-2104 · stamp set · 22 stamps</div>
      </div>
    </div>
  );
}

function BrandsVisual() {
  const brands = ["Lawn Fawn","Altenew","Spellbinders","My Favorite Things","Concord & 9th","Hero Arts","Catherine Pooler","Waffle Flower","Pinkfresh Studio","Gina K Designs"];
  return (
    <div style={{ background: "var(--paper-2)", border: "1px solid var(--line-soft)", borderRadius: 14, padding: 18 }}>
      <div className="kicker" style={{ marginBottom: 12, padding: "0 4px" }}>Supported brands at launch</div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
        {brands.map((b, i) => (
          <div key={b} style={{ padding: "10px 12px", background: "var(--paper)", border: "1px solid var(--line-soft)", borderRadius: 8, fontSize: "0.85rem", fontWeight: 500, display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 18, height: 18, borderRadius: 4, background: ["var(--mint)","var(--butter)","var(--sky)","var(--lilac)","var(--accent-soft)"][i % 5], display: "grid", placeItems: "center", fontFamily: "var(--display-font)", fontSize: 10, fontWeight: 700, color: "var(--ink)" }}>{b[0]}</span>
            {b}
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { UpcomingPage });