import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" function breakdown(ms) { if (!ms || ms <= 0) return { d: 0, h: 0, m: 0, s: 0 } const totalSec = Math.floor(ms / 1000) const s = totalSec % 60 const totalMin = Math.floor(totalSec / 60) const m = totalMin % 60 const totalHr = Math.floor(totalMin / 60) const h = totalHr % 24 const d = Math.floor(totalHr / 24) return { d, h, m, s } } function ObserveForm({ database, state, c, now }) { const [text, setText] = React.useState("") const [loading, setLoading] = React.useState(false) const [suggesting, setSuggesting] = React.useState(false) const suggest = async () => { setSuggesting(true) try { const ctx = state?.active ? `during ${state.hollow?.name} (day ${state.hollow?.n} of 5 hollow days)` : "awaiting the hollow days" const r = await callAI(`Write a single short reverent reflection (under 25 words) for an observer ${ctx}. Tone: quiet, ominous, codex-like.`, { schema: { properties: { reflection: { type: "string" } } } }) setText(JSON.parse(r).reflection || "") } finally { setSuggesting(false) } } const save = async (e) => { e.preventDefault() setLoading(true) try { await database.put({ type: "observation", text, at: now.toISOString(), nemontemiActive: !!state?.active, hollowDay: state?.active ? state.hollow.n : null }) setText("") } finally { setLoading(false) } } const Spinner = () => () return (

setText(e.target.value)} />
      <div className="flex gap-3 mt-4 flex-wrap">
        <button type="submit" disabled={loading} className={c.btn}>{loading ? <Spinner /> : "[ Inscribe Observation ]"}</button>
        <button type="button" onClick={suggest} disabled={suggesting} className={c.btnGold}>{suggesting ? <Spinner /> : "[ Consult Oracle ]"}</button>
      </div>
    </form>
  )
}

function CodexScroll({ useLiveQuery, c }) {
  const { docs } = useLiveQuery("type", { key: "observation", descending: true, limit: 50 })
  if (!docs.length) return <p className={`${c.muted} italic`}>The scroll is yet unmarked.</p>
  return (
    <ul className="space-y-4">
      {docs.map(d => (
        <li key={d._id} className="border-l border-[#2a2015] pl-3">
          <div className={`${c.terracotta} text-xs uppercase tracking-[0.12em]`}>{new Date(d.at).toLocaleString()}{d.nemontemiActive ? ` · Hollow ${d.hollowDay}/5` : ""}</div>
          <div className="mt-1 italic">{d.text || <span className={c.muted}>(silent observation)</span>}</div>
        </li>
      ))}
    </ul>
  )
}

const HOLLOW_NAMES = [
  "Nemontemi I — The First Hollow",
  "Nemontemi II — The Second Hollow",
  "Nemontemi III — The Third Hollow",
  "Nemontemi IV — The Fourth Hollow",
  "Nemontemi V — The Final Hollow",
]
const HOLLOW_CHARS = [
  "No fire may be kindled. The year holds its breath.",
  "No undertaking may begin. Walk on unmarked ground.",
  "The augury is silent. The calendar holds nothing here.",
  "Born in hollow days: a life without destiny written.",
  "The year's ghost exhales. The new year stirs beneath.",
]

export default function App() {
  const c = {
    page: "min-h-screen bg-[#06040a] text-[#d4c5a0] font-[Cormorant_Garamond,Georgia,serif] text-[1.05rem]",
    topBar: "h-1 w-full bg-gradient-to-r from-[#c9a84c] via-[#e8c96a] to-[#c9a84c]",
    wrap: "max-w-2xl mx-auto px-5 py-8",
    header: "text-center mb-8",
    brand: "font-[Cinzel,serif] text-[#c9a84c] uppercase tracking-[0.12em] text-2xl md:text-3xl font-bold",
    brandGlow: "[text-shadow:0_0_16px_rgba(201,168,76,0.4)]",
    tagline: "italic text-[#8a7a60] mt-2 text-sm",
    section: "bg-[#12100a] border border-[#2a2015] p-5 mb-6",
    h2: "font-[Cinzel,serif] text-[#c9a84c] uppercase tracking-[0.12em] text-sm font-semibold mb-4",
    muted: "text-[#8a7a60] text-sm",
    divider: "flex items-center justify-center my-6 text-[#c9a84c]",
    dividerLine: "flex-1 h-px bg-[#2a2015]",
    glyph: "px-3",
    btn: "font-[Cinzel,serif] uppercase tracking-[0.12em] text-xs border border-[#00c9a7] text-[#00c9a7] px-4 py-3 min-h-[44px] hover:bg-[#00c9a7] hover:text-[#06040a] transition-colors",
    btnGold: "font-[Cinzel,serif] uppercase tracking-[0.12em] text-xs border border-[#c9a84c] text-[#c9a84c] px-4 py-3 min-h-[44px] hover:bg-[#c9a84c] hover:text-[#06040a] transition-colors",
    input: "w-full bg-transparent border-0 border-b border-[#c9a84c] text-[#d4c5a0] py-2 focus:outline-none focus:[box-shadow:0_2px_8px_-4px_rgba(201,168,76,0.6)]",
    terracotta: "text-[#c0522a] font-[Cinzel,serif]",
  }

const { database, useDocument, useLiveQuery } = useFireproof("nemontemi-watcher")

const { doc: anchorDoc, merge: mergeAnchor, submit: submitAnchor } = useDocument({ _id: "anchor", anchorISO: "" })

const [now, setNow] = React.useState(new Date())
  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000)
    return () => clearInterval(id)
  }, [])

const state = React.useMemo(() => {
    if (!anchorDoc.anchorISO) return null
    const anchorDate = new Date(anchorDoc.anchorISO)
    if (isNaN(anchorDate.getTime())) return null
    const elapsed = now - anchorDate
    if (elapsed < 0) return null
    const MS_DAY = 86_400_000
    const totalDays = Math.floor(elapsed / MS_DAY)
    const yearOffset = Math.floor(totalDays / 365)
    const dayOfYear = totalDays % 365
    const yearStart = new Date(anchorDate.getTime() + yearOffset * 365 * MS_DAY)
    if (dayOfYear >= 360) {
      const n = dayOfYear - 359
      const nextYearStart = new Date(yearStart.getTime() + 365 * MS_DAY)
      return { active: true, msToEnd: nextYearStart - now, msToNext: 0, hollow: { n, name: HOLLOW_NAMES[n - 1], char: HOLLOW_CHARS[n - 1] } }
    }
    const nemontemiStart = new Date(yearStart.getTime() + 360 * MS_DAY)
    return { active: false, msToNext: nemontemiStart - now, msToEnd: 0, hollow: null }
  }, [anchorDoc.anchorISO, now])

return (
    <div className={c.page}>
      <div className={c.topBar} />
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
      <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=optional" rel="stylesheet" />

<div className={c.wrap}>
        <header id="app-header" className={c.header}>
          <h1 className={`${c.brand} ${c.brandGlow}`}>Nemontemi Watcher</h1>
          <p className={c.tagline}>The five hollow days · an obsidian almanac</p>
        </header>

{state?.active && (
            <div className="bg-black border border-[#2a2015] p-5 mb-6 text-center">
              <div className="font-[Cinzel,serif] uppercase tracking-[0.2em] text-[#8a7a60] text-sm">Nemontemi — Five Hollow Days</div>
              <div className="font-[Cinzel,serif] text-[#8a7a60] text-xl mt-3">{state.hollow.name}</div>
              <div className="text-[#8a7a60] text-xs mt-1">Day {state.hollow.n} of 5</div>
              <p className="italic text-[#6a5a40] mt-3">{state.hollow.char}</p>
            </div>
          )}
          <section id="countdown" className={c.section} style={state?.active ? { opacity: 0.5 } : {}}>
            <h2 className={c.h2}>◈ {state?.active ? "Time Until Hollow Ends" : "Time Until The Hollow"} ◈</h2>
            {state ? (() => {
              const b = breakdown(state.active ? state.msToEnd : state.msToNext)
              return (
                <div className="grid grid-cols-4 gap-3 text-center mb-4">
                  <div><div className={`${c.terracotta} text-3xl`}>{b.d}</div><div className={c.muted}>days</div></div>
                  <div><div className={`${c.terracotta} text-3xl`}>{b.h}</div><div className={c.muted}>hrs</div></div>
                  <div><div className={`${c.terracotta} text-3xl`}>{b.m}</div><div className={c.muted}>min</div></div>
                  <div><div className={`${c.terracotta} text-3xl`}>{b.s}</div><div className={c.muted}>sec</div></div>
                </div>
              )
            })() : (
              <>
                <div className="grid grid-cols-4 gap-3 text-center mb-4">
                  <div><div className={`${c.terracotta} text-3xl`}>—</div><div className={c.muted}>days</div></div>
                  <div><div className={`${c.terracotta} text-3xl`}>—</div><div className={c.muted}>hrs</div></div>
                  <div><div className={`${c.terracotta} text-3xl`}>—</div><div className={c.muted}>min</div></div>
                  <div><div className={`${c.terracotta} text-3xl`}>—</div><div className={c.muted}>sec</div></div>
                </div>
                <p className={`${c.muted} italic text-center`}>Awaiting the anchor stone…</p>
              </>
            )}
          </section>

<section id="anchor" className={c.section}>
            <h2 className={c.h2}>◈ The Anchor Stone ◈</h2>
            <p className={`${c.muted} mb-3`}>Set the first day of the solar year. The hollow days fall on days 361–365.</p>
            <form onSubmit={(e) => { e.preventDefault(); submitAnchor() }}>
              <input
                type="date"
                className={c.input}
                value={anchorDoc.anchorISO ? anchorDoc.anchorISO.slice(0,10) : ""}
                onChange={(e) => mergeAnchor({ anchorISO: e.target.value ? new Date(e.target.value).toISOString() : "" })}
              />
              <button type="submit" className={`${c.btnGold} mt-4`}>[ Inscribe ]</button>
            </form>
          </section>

<section id="observe" className={c.section}>
            <h2 className={c.h2}>◈ Record An Observation ◈</h2>
            <ObserveForm database={database} state={state} c={c} now={now} />
          </section>

<section id="codex" className={c.section}>
            <h2 className={c.h2}>◈ The Codex Scroll ◈</h2>
            <CodexScroll useLiveQuery={useLiveQuery} c={c} />
          </section>
        </main>
      </div>
    </div>
  )
}
</article></body></html>

◈ Time Until The Hollow ◈

◈ The Anchor Stone ◈

◈ Record An Observation ◈

◈ The Codex Scroll ◈