// Komonichi — public homepage. Three sub-pages selected via hash:
//   #home      → introduction (default)
//   #features  → feature list
//   #guide     → how to use the app
// CTAs route into the existing auth views (#signup, #login) and Google OAuth.
(function () {
  const Mute = window.KomonichiMute;

  // ─── top bar ─────────────────────────────────────────────────────────────
  function HomeTop({ active }) {
    const { useState, useEffect } = React;
    const [menuOpen, setMenuOpen] = useState(false);

    // close on hash change (so tapping a link closes the drawer) and on
    // resize past the mobile breakpoint.
    useEffect(() => {
      const onHash = () => setMenuOpen(false);
      window.addEventListener("hashchange", onHash);
      const mq = window.matchMedia("(min-width: 881px)");
      const onMq = () => mq.matches && setMenuOpen(false);
      mq.addEventListener?.("change", onMq);
      return () => {
        window.removeEventListener("hashchange", onHash);
        mq.removeEventListener?.("change", onMq);
      };
    }, []);

    const navItems = [
      { key: "home",     label: "introduction" },
      { key: "features", label: "features" },
      { key: "guide",    label: "guide" },
    ];
    return React.createElement("nav", { className: "home-top" + (menuOpen ? " menu-open" : "") },
      // brand
      React.createElement("a", { className: "home-brand", href: "#home" },
        React.createElement("div", { className: "mark" }),
        React.createElement("div", null,
          React.createElement("div", { className: "name" }, "komonichi"),
          React.createElement("div", { className: "tag" }, "a quiet practice")
        )
      ),
      // middle nav (drawer on mobile)
      React.createElement("div", { className: "home-nav" + (menuOpen ? " open" : "") },
        ...navItems.map((item, i) =>
          React.createElement("a", {
            key: item.key,
            href: "#" + item.key,
            className: "home-nav-link" + (active === item.key ? " active" : ""),
          },
            React.createElement("span", { className: "idx" }, ["一","二","三"][i]),
            item.label
          )
        )
      ),
      // right CTAs
      React.createElement("div", { className: "home-cta" },
        Mute ? React.createElement(Mute.MuteButton, null) : null,
        React.createElement("a", { className: "btn ghost tiny", href: "#login" }, "log in"),
        React.createElement("a", { className: "btn warm tiny", href: "#signup" }, "begin"),
        React.createElement("button", {
          className: "hamburger" + (menuOpen ? " open" : ""),
          "aria-label": menuOpen ? "close menu" : "open menu",
          "aria-expanded": menuOpen,
          onClick: () => setMenuOpen(o => !o),
        },
          React.createElement("span"),
          React.createElement("span"),
          React.createElement("span")
        )
      )
    );
  }

  // ─── shared CTA row (signup / google / login) ────────────────────────────
  function CtaRow({ centered = true, includeLogin = true }) {
    return React.createElement("div", {
      className: "home-cta-row",
      style: centered ? { justifyContent: "center" } : null,
    },
      React.createElement("a", { className: "btn warm", href: "#signup" }, "get started"),
      React.createElement("a", { className: "btn", href: "/api/auth/oauth/google/start" },
        "continue with google"
      ),
      includeLogin
        ? React.createElement("a", { className: "btn ghost", href: "#login" }, "already here? log in")
        : null
    );
  }

  // ─── #home ───────────────────────────────────────────────────────────────
  // A small helper for divider strokes between sections.
  function Brush({ width = 480, margin = "44px auto" }) {
    return React.createElement("div", {
      className: "brush",
      style: { margin, maxWidth: width },
    });
  }

  // Section header used for the intro's interior sections (smaller than the
  // page-level section heads on /features and /guide so the hero stays
  // dominant).
  function SubSectionHead({ label, title, em }) {
    return React.createElement("div", { className: "home-sub-head" },
      React.createElement("div", { className: "label" }, label),
      React.createElement("h2", { className: "display" },
        title, em ? [" ", React.createElement("em", { key: "e" }, em)] : null
      )
    );
  }

  // A small kanji + prose row used inside "the shape of the practice".
  function ShapeRow({ kanji, name, body }) {
    return React.createElement("div", { className: "home-shape-row" },
      React.createElement("div", { className: "home-shape-kanji" }, kanji),
      React.createElement("div", null,
        React.createElement("h3", { className: "title" }, name),
        React.createElement("p", { className: "haiku" }, body)
      )
    );
  }

  function IntroPage() {
    return React.createElement("section", { className: "fade-in" },
      // ── hero ─────────────────────────────────────────────────────────────
      React.createElement("div", { className: "home-hero" },
        React.createElement("div", { className: "enso breathe", style: { margin: "0 auto 28px" } }),
        React.createElement("div", { className: "label" }, "for the practice of attention"),
        React.createElement("h1", { className: "display" },
          "sit ", React.createElement("em", null, "with one thing")
        ),
        React.createElement("p", { className: "haiku" },
          "Komonichi is a quiet place for the practice of attention. Not a productivity tool — a small wooden bench. Sit with what matters: the body, the mind, the craft. Make objectives you cannot edit, tasks you can let go of, sessions you can simply count. Walk away when you've done enough."
        ),
        React.createElement(CtaRow, null)
      ),

      React.createElement(Brush, null),

      // ── on slow practice ────────────────────────────────────────────────
      React.createElement("div", { className: "home-prose" },
        React.createElement(SubSectionHead, {
          label: "on slow practice",
          title: "the ",
          em: "small day",
        }),
        React.createElement("p", null,
          "Komonichi (",
          React.createElement("span", { className: "home-jp" }, "小日"),
          ") is two characters — ",
          React.createElement("em", null, "small"),
          ", and ",
          React.createElement("em", null, "day"),
          ". Not because the days are unimportant. Because they are. The practice is to make each one small enough to hold."
        ),
        React.createElement("p", null,
          "Most productivity tools ask, ",
          React.createElement("em", null, "how can I do more?"),
          " Komonichi asks something quieter: ",
          React.createElement("em", null, "what deserves my attention today?"),
          " One real hour, freely given, is worth more than a week of half-presence. The whole tool is shaped around that conviction."
        ),
        React.createElement("p", null,
          "This is slow productivity in the literal sense. Fewer items on the page. Longer time spent with the ones that remain. Permission to leave the rest untouched. The bench will still be here tomorrow."
        )
      ),

      // ── Lao Tzu pull-quote (a breath between sections) ───────────────────
      React.createElement("blockquote", { className: "welcome-quote home-quote" },
        React.createElement("span", { className: "welcome-quote-text" },
          "“The journey of a thousand miles begins beneath one's feet.”"),
        React.createElement("span", { className: "welcome-quote-attr" }, "— 老子 Laozi")
      ),

      React.createElement(Brush, null),

      // ── how it should feel ──────────────────────────────────────────────
      React.createElement("div", { className: "home-prose" },
        React.createElement(SubSectionHead, {
          label: "what the tool wants from you",
          title: "how it should ",
          em: "feel",
        }),
        React.createElement("p", null,
          "You should feel the way you feel reading a book — not the way you feel scrolling a feed. The colors are the colors of paper, not screens. The type is meant to be read, not branded. The animations are slow because attention itself is slow."
        ),
        React.createElement("p", null,
          "When you complete a task, nothing celebrates. A small mark accrues, quietly. When you sit with the timer, a single bell rings at the end. There is no fanfare, no streak, no leaderboard. Only the record of having shown up. That is enough — and the tool is built to remember that it is."
        )
      ),

      React.createElement(Brush, null),

      // ── the shape of the practice ────────────────────────────────────────
      React.createElement("div", { className: "home-shape" },
        React.createElement(SubSectionHead, {
          label: "what holds the day together",
          title: "the shape of the ",
          em: "practice",
        }),
        React.createElement("p", { className: "haiku home-shape-intro" },
          "Komonichi has only a few parts. Each is intentionally small. Together they make a shape you can return to each day without thinking."
        ),
        React.createElement("div", { className: "home-shape-list" },
          React.createElement(ShapeRow, {
            kanji: "域",
            name: "areas of life",
            body: "Three or four pillars — body, mind, craft, or your own. A small brain-map showing where attention lives. Every task lies under one, so you can ask at the end of a day: which part of me did I attend to?",
          }),
          React.createElement(ShapeRow, {
            kanji: "志",
            name: "objectives",
            body: "Set once, kept always. Year, quarter, month, week. They cannot be edited — the point is not to revise the aim, only to walk closer to it. A task may bow to one, or to none.",
          }),
          React.createElement(ShapeRow, {
            kanji: "今",
            name: "today",
            body: "A single quiet page. The handful of tasks scheduled for today. A breathing timer. A sheet of notes. Whatever marks have accrued. Tomorrow begins a fresh page; the prior one is kept but not insisted upon.",
          }),
          React.createElement(ShapeRow, {
            kanji: "練",
            name: "the focus timer",
            body: "A breathing entrance, a session of the length you choose, a soft temple bell when the time is full. Sessions count toward a small daily mark. Nothing more. No analytics dashboard, no productivity score.",
          }),
          React.createElement(ShapeRow, {
            kanji: "書",
            name: "daily notes and a journal",
            body: "A page kept open. What arrived today — a thought, a person, an unfinished question. Saved as you type. The journal collects them so you can wander back, slowly, when you want to.",
          }),
          React.createElement(ShapeRow, {
            kanji: "印",
            name: "marks",
            body: "Small badges that accrue from sitting, not from competing. Not visible to others. Not transferable. They mark, simply, that you returned.",
          })
        )
      ),

      React.createElement(Brush, null),

      // ── kept light (task management philosophy) ─────────────────────────
      React.createElement("div", { className: "home-prose" },
        React.createElement(SubSectionHead, {
          label: "the discipline of the tool",
          title: "kept ",
          em: "light",
        }),
        React.createElement("p", null,
          "Tasks in Komonichi are deliberately under-featured. No project hierarchies five levels deep. No P0 through P3. No tags, no custom fields, no dependencies. A task is a title, an estimate, an area, an optional objective, an optional due date. That is the whole of it."
        ),
        React.createElement("p", null,
          "You can clone a completed task to recreate a small practice — the morning sit, the daily page — without retyping. You can reschedule everything that slipped onto today with a single button. You can archive a task you no longer believe in (nothing is destroyed; you can always find it again). But you cannot bury a task under categories until it stops being a task at all."
        ),
        React.createElement("p", null,
          "This is the discipline of the tool: it refuses to grow features that would make it heavier. The lightness is not a missing thing. It is the thing."
        )
      ),

      React.createElement(Brush, null),

      // ── three kanji (closing breath) ────────────────────────────────────
      React.createElement("div", { className: "home-three-lines" },
        React.createElement("div", { className: "home-three-line" },
          React.createElement("div", { className: "home-three-kanji" }, "静"),
          React.createElement("div", { className: "haiku" }, "Stillness, kept on the page rather than the wire.")
        ),
        React.createElement("div", { className: "home-three-line" },
          React.createElement("div", { className: "home-three-kanji" }, "続"),
          React.createElement("div", { className: "haiku" }, "Continuation. To return tomorrow is itself a kind of strength.")
        ),
        React.createElement("div", { className: "home-three-line" },
          React.createElement("div", { className: "home-three-kanji" }, "余"),
          React.createElement("div", { className: "haiku" }, "Yohaku — the blank space. What is not done is also the practice.")
        )
      ),

      // ── final CTA ───────────────────────────────────────────────────────
      React.createElement("div", { className: "home-final" },
        React.createElement("div", { className: "label" }, "begin"),
        React.createElement("h3", { className: "display" }, "the first session is ten minutes."),
        React.createElement("p", { className: "haiku" },
          "There is nothing to install. Nothing to learn beyond what you find as you go. Sit once. See if it is the kind of bench you want to return to."
        ),
        React.createElement(CtaRow, null)
      )
    );
  }

  // ─── #features ───────────────────────────────────────────────────────────
  const FEATURES = [
    { kanji: "今", title: "today",         body: "A single quiet page. Tasks scheduled for today, a focus timer, a place to keep what arrived." },
    { kanji: "練", title: "focus timer",   body: "Sit with one thing. A breathing entrance, a session, a soft temple bell when the time is full." },
    { kanji: "域", title: "areas of life", body: "Body, mind, craft — or your own. A small brain-map showing where attention lives." },
    { kanji: "志", title: "objectives",    body: "Yearly, quarterly, monthly, weekly. Once set down, they remain. Only the work changes." },
    { kanji: "書", title: "daily notes",   body: "A fresh sheet each day. Kept on the page, not the wire. What is past, let pass." },
    { kanji: "印", title: "marks",         body: "Small badges accrue as you sit. Not gamification — a quiet record of your presence." },
  ];

  function FeaturesPage() {
    return React.createElement("section", { className: "fade-in" },
      React.createElement("div", { className: "home-section-head" },
        React.createElement("div", { className: "label" }, "what lives here"),
        React.createElement("h2", { className: "display" },
          "the ", React.createElement("em", null, "features")
        ),
        React.createElement("p", { className: "haiku home-section-sub" },
          "Small parts, kept small. Each one is a tool, not a feed."
        )
      ),
      React.createElement("div", { className: "home-features" },
        ...FEATURES.map(f =>
          React.createElement("div", { key: f.title, className: "home-feature-card card" },
            React.createElement("div", { className: "home-feature-kanji" }, f.kanji),
            React.createElement("h3", { className: "title" }, f.title),
            React.createElement("p", { className: "haiku" }, f.body)
          )
        )
      ),
      React.createElement("div", { style: { marginTop: 56 } },
        React.createElement(CtaRow, null)
      )
    );
  }

  // ─── #guide ──────────────────────────────────────────────────────────────
  const GUIDE = [
    { idx: "一", title: "set your areas",        body: "Open the brain-map and place three or four areas — body, mind, craft, or your own. Every task lives under one." },
    { idx: "二", title: "place your objectives", body: "Write what matters at the year, quarter, month, and week. Once set, they cannot be edited — only the work beneath them changes." },
    { idx: "三", title: "place small tasks",     body: "Tasks are small. A line, a minute estimate, optionally a due date. Today's tasks appear on Today; the rest wait quietly." },
    { idx: "四", title: "sit with the timer",    body: "Open the timer, pick a task, breathe in. The bell rings when the session is full. The minutes are kept." },
    { idx: "五", title: "let the day close",     body: "Each day begins a fresh sheet. Notes, marks, completed tasks — all kept. Tomorrow will be its own day." },
  ];

  function GuidePage() {
    return React.createElement("section", { className: "fade-in" },
      React.createElement("div", { className: "home-section-head" },
        React.createElement("div", { className: "label" }, "how to begin"),
        React.createElement("h2", { className: "display" },
          "the ", React.createElement("em", null, "guide")
        ),
        React.createElement("p", { className: "haiku home-section-sub" },
          "Five short steps. Take them slowly — the bench will still be here tomorrow."
        )
      ),
      React.createElement("ol", { className: "home-guide" },
        ...GUIDE.map(g =>
          React.createElement("li", { key: g.idx, className: "home-guide-step" },
            React.createElement("div", { className: "home-guide-idx" }, g.idx),
            React.createElement("div", { className: "home-guide-body" },
              React.createElement("h3", { className: "title" }, g.title),
              React.createElement("p", { className: "haiku" }, g.body)
            )
          )
        )
      ),
      React.createElement("div", { style: { marginTop: 48 } },
        React.createElement(CtaRow, null)
      )
    );
  }

  // ─── footer ──────────────────────────────────────────────────────────────
  function HomeFooter() {
    return React.createElement("footer", { className: "home-footer" },
      React.createElement("div", { className: "home-footer-inner" },
        React.createElement("div", { className: "label" }, "komonichi — a quiet practice"),
        React.createElement("div", { className: "haiku", style: { fontSize: 12, marginTop: 6 } },
          "kept on the page, not the wire."
        )
      )
    );
  }

  // ─── shell ───────────────────────────────────────────────────────────────
  function HomePage({ route }) {
    const active = (route === "features" || route === "guide") ? route : "home";
    return React.createElement("div", { className: "home-wrap" },
      React.createElement(HomeTop, { active }),
      React.createElement("main", { className: "home-main" },
        active === "home"     ? React.createElement(IntroPage) :
        active === "features" ? React.createElement(FeaturesPage) :
                                React.createElement(GuidePage)
      ),
      React.createElement(HomeFooter, null)
    );
  }

  window.KomonichiHome = { HomePage };
})();