import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" function ReflectionFeed({ useLiveQuery, conceptId, conceptName, c }) { const { docs } = useLiveQuery("conceptId", { key: conceptId }) const reflections = docs.filter((d) => d.type === "reflection").sort((a, b) => b.createdAt - a.createdAt) return (

Reflections on {conceptName}

{reflections.length === 0 ? (

No reflections yet. Be the first to leave a mark in the codex.

) : (

{r.authorAvatarUrl && }

{r.authorDisplayName || r.authorUserSlug}

{r.body}

{new Date(r.createdAt).toLocaleDateString()}

)}

) } function ReflectionForm({ database, useDocument, conceptId, conceptName, c }) { const { doc, merge, submit } = useDocument({ type: "reflection", conceptId, body: "", authorUserSlug: "visitor", authorDisplayName: "visitor", authorAvatarUrl: null, createdAt: Date.now(), }) function handleSubmit(e) { e.preventDefault() if (!doc.body.trim()) return merge({ conceptId, createdAt: Date.now(), authorUserSlug: "visitor", authorDisplayName: "visitor", authorAvatarUrl: null }) submit(e) } return (

merge({ body: e.target.value })}
        placeholder={`What does "${conceptName}" open up for you?`}
        className={c.input}
      />
      <button type="submit" className={c.btnGold + " w-full"}>Save reflection</button>
    </form>
  )
}

const CONCEPTS = [
  { id: "intersectionality", name: "Intersectionality", thinker: "Kimberlé Crenshaw", year: 1989 },
  { id: "matrix", name: "Matrix of Domination", thinker: "Patricia Hill Collins", year: 1990 },
  { id: "respectability", name: "Politics of Respectability", thinker: "Evelyn Brooks Higginbotham", year: 1993 },
  { id: "erotic", name: "The Erotic as Power", thinker: "Audre Lorde", year: 1978 },
  { id: "situated", name: "Situated Knowledge", thinker: "bell hooks", year: 1984 },
]

export default function App() {
  const { database, useDocument, useLiveQuery } = useFireproof("bf-codex")
  const [selectedId, setSelectedId] = React.useState("intersectionality")
  const [isExplaining, setIsExplaining] = React.useState(false)

const { docs: explanations } = useLiveQuery("conceptId", { key: selectedId })
  const explanation = explanations[0]
  const selected = CONCEPTS.find((x) => x.id === selectedId)

async function explainConcept(concept) {
    setIsExplaining(true)
    try {
      const prompt = `You are a scholar of Black feminist thought. Explain "${concept.name}" by ${concept.thinker} (${concept.year}). Provide: a plain-language definition, biographical context of the thinker, the specific political and intellectual conditions that produced the concept (civil rights movement, second-wave feminism, the 1980s-1990s academy, etc.), two concrete historical examples of the concept in action, and connections to: ${CONCEPTS.filter(x => x.id !== concept.id).map(x => x.name).join(", ")}.`
      const res = await callAI(prompt, {
        schema: {
          properties: {
            definition: { type: "string" },
            biography: { type: "string" },
            conditions: { type: "string" },
            examples: { type: "array", items: { type: "string" } },
            connections: { type: "array", items: { type: "object", properties: { concept: { type: "string" }, link: { type: "string" } } } },
          },
        },
      })
      const parsed = JSON.parse(res)
      await database.put({ conceptId: concept.id, ...parsed, createdAt: Date.now() })
    } finally {
      setIsExplaining(false)
    }
  }

const c = {
    page: "min-h-screen bg-[#0f0f0f] text-[#e6e6e6] font-serif",
    header: "border-b border-[#5c5340] bg-[#1a1612] px-5 py-6 sticky top-0 z-10",
    title: "text-2xl md:text-3xl tracking-[0.2em] uppercase text-[#d4b87a]",
    tagline: "text-xs md:text-sm text-[#8a7d5f] mt-1 tracking-widest uppercase",
    main: "max-w-3xl mx-auto px-4 py-6 space-y-6 pb-24",
    section: "bg-[#1a1612] border border-[#3d3527] rounded-sm p-5 shadow-lg",
    h2: "text-lg tracking-[0.25em] uppercase text-[#d4b87a] border-b border-[#3d3527] pb-2 mb-4",
    btn: "min-h-[44px] px-4 py-3 bg-[#5c1a1a] hover:bg-[#7a2222] text-[#f4e4c1] tracking-widest uppercase text-sm border border-[#8a3030] transition",
    btnGold: "min-h-[44px] px-4 py-3 bg-[#3d3527] hover:bg-[#5c5340] text-[#d4b87a] tracking-widest uppercase text-sm border border-[#5c5340] transition",
    input: "w-full bg-[#0f0f0f] border border-[#3d3527] text-[#e6e6e6] px-3 py-3 rounded-sm focus:border-[#d4b87a] focus:outline-none",
    chip: "px-3 py-2 border border-[#5c5340] text-[#d4b87a] text-xs uppercase tracking-widest hover:bg-[#3d3527] cursor-pointer transition rounded-sm",
    muted: "text-[#8a7d5f] text-sm italic",
    avatar: "w-8 h-8 rounded-full border border-[#5c5340]",
  }

return (
    <div className={c.page}>
      <header id="app-header" className={c.header}>
        <h1 className={c.title}>Black Feminist Codex</h1>
        <p className={c.tagline}>Tools for analyzing power · drawn from lived experience</p>
      </header>
      <main id="app" className={c.main}>
        <section id="concept-selector" className={c.section}>
          <h2 className={c.h2}>Select a Concept</h2>
          <p className={c.muted + " mb-4"}>Five foundational tools. Each emerged from specific struggle.</p>
          <div className="flex flex-wrap gap-2 mb-4">
            {CONCEPTS.map((concept) => (
              <button
                key={concept.id}
                onClick={() => setSelectedId(concept.id)}
                className={selectedId === concept.id ? c.chip + " bg-[#5c5340] text-[#f4e4c1]" : c.chip}
              >
                {concept.name} · {concept.thinker.split(" ").slice(-1)[0]}
              </button>
            ))}
          </div>
          <button
              onClick={() => explainConcept(selected)}
              disabled={isExplaining}
              className={c.btn + " w-full"}
            >
              {isExplaining ? (
                <span className="inline-flex items-center gap-2">
                  <svg className="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="9" strokeDasharray="40 20" /></svg>
                  Consulting the codex...
                </span>
              ) : explanation ? "Re-expand this concept" : "Explore this concept"}
            </button>
        </section>
        <section id="concept-detail" className={c.section}>
          <h2 className={c.h2}>{selected.name}</h2>
          <p className="text-[#d4b87a] text-sm tracking-widest uppercase mb-5">{selected.thinker} · {selected.year}</p>
          {!explanation ? (
            <p className={c.muted}>No entry yet. Tap explore above to consult the codex.</p>
          ) : (
            <div className="space-y-5">
              <div>
                <h3 className="text-xs uppercase tracking-widest text-[#8a7d5f] mb-2">Definition</h3>
                <p className="text-[#e6e6e6] leading-relaxed">{explanation.definition}</p>
              </div>
              <div>
                <h3 className="text-xs uppercase tracking-widest text-[#8a7d5f] mb-2">The Thinker</h3>
                <p className="text-[#e6e6e6] leading-relaxed">{explanation.biography}</p>
              </div>
              <div>
                <h3 className="text-xs uppercase tracking-widest text-[#8a7d5f] mb-2">Conditions of Emergence</h3>
                <p className="text-[#e6e6e6] leading-relaxed">{explanation.conditions}</p>
              </div>
              <div>
                <h3 className="text-xs uppercase tracking-widest text-[#8a7d5f] mb-2">Historical Examples</h3>
                <ul className="space-y-2">
                  {(explanation.examples || []).map((ex, i) => (
                    <li key={i} className="text-[#e6e6e6] leading-relaxed border-l-2 border-[#5c1a1a] pl-3">{ex}</li>
                  ))}
                </ul>
              </div>
              <div>
                <h3 className="text-xs uppercase tracking-widest text-[#8a7d5f] mb-2">Connections</h3>
                <ul className="space-y-2">
                  {(explanation.connections || []).map((conn, i) => (
                    <li key={i} className="text-[#e6e6e6] leading-relaxed">
                      <span className="text-[#d4b87a] tracking-wider">{conn.concept}:</span> {conn.link}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          )}
        </section>
        <section id="reflections" className={c.section}>
          <h2 className={c.h2}>Your Reflection on {selected.name}</h2>
          <ReflectionForm
              database={database}
              useDocument={useDocument}
              conceptId={selected.id}
              conceptName={selected.name}
              c={c}
            />
        </section>
        <ReflectionFeed
          useLiveQuery={useLiveQuery}
          conceptId={selected.id}
          conceptName={selected.name}
          c={c}
        />
      </main>
    </div>
  )
}</article></body></html>

Select a Concept

Intersectionality

Your Reflection on Intersectionality

Reflections on Intersectionality