// KAIJA — Problem, Solution, How it works, Architecture sections
function ProblemSection() {
  const items = [
    { n: "01", h: "Specs live outside Jira", p: "Specs, brain dumps, meeting notes, and architecture decisions live in Notion, Loom, and Slack — context never lands inside Jira." },
    { n: "02", h: "Jira issues are incomplete", p: "Titles without context, stories without acceptance criteria, tasks no agent can pick up." },
    { n: "03", h: "Agents lack scope", p: "Claude Code, Cursor, and CLI agents can implement work, but they need structured intent, constraints, and validation criteria." },
    { n: "04", h: "Work loses traceability", p: "Specs to issues to commits to PRs — the chain breaks somewhere, every sprint." },
    { n: "05", h: "Evidence doesn't reach Jira", p: "Branches, commits, PRs, and status changes often sit outside the originating work item." },
    { n: "06", h: "No governance layer", p: "Teams want structured, measurable AI execution — not a chatbot bolted onto a backlog." },
  ];
  return (
    <section className="section section-soft">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow">The problem</span>
          <h2>AI coding is powerful.<br/>Execution is still messy.</h2>
          <p className="lead">Specs, Jira, agents, and delivery evidence each live in their own system. KAIJA exists for the missing layer between intent, issue tracking, agent execution, and delivery evidence.</p>
        </div>
        <div className="problems-grid">
          {items.map((x, i) => (
            <div key={i} className="problem">
              <div className="num">{x.n}</div>
              <h3>{x.h}</h3>
              <p>{x.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SolutionSection() {
  const items = [
    {
      icon: Icon.spec, h: "Structure intent",
      p: "Convert specs and brain dumps into clear Jira hierarchies using the issue types your project actually supports.",
      preview: <SpecToHierarchyMini/>,
    },
    {
      icon: Icon.jira, h: "Create execution-ready issues", v:"v2",
      p: "Every issue carries objective, context, AI scope, expected output, prompt skeleton, and validation checklist.",
      preview: <IssueAnatomyMini/>,
    },
    {
      icon: Icon.agent, h: "Move work into Claude Code", v:"v3",
      p: "Generate focused execution packs — repo paths, constraints, acceptance criteria — ready for a coding agent in one command.",
      preview: <ExecutionPackMini/>,
    },
    {
      icon: Icon.pr, h: "Sync evidence back", v:"v4",
      p: "Commits, PRs, and status transitions can be synced back to the originating Jira issue.",
      preview: <EvidenceMini/>,
    },
  ];
  return (
    <section className="section" id="product">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow">The solution</span>
          <h2>KAIJA makes Jira agent-ready.</h2>
          <p className="lead">A kernel that sits between specs, Jira, coding agents, and delivery evidence — turning Jira into a structured AI-native execution surface.</p>
        </div>
        <div className="solutions-grid">
          {items.map((x, i) => {
            const I = x.icon;
            return (
              <div key={i} className={"solution " + (x.v || "")}>
                <div className="badge">{I({size:22})}</div>
                <h3>{x.h}</h3>
                <p>{x.p}</p>
                <div className="preview">{x.preview}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// Mini previews inside solution cards
function SpecToHierarchyMini() {
  return (
    <div style={{display:"grid", gridTemplateColumns:"1fr auto 1fr", gap:14, alignItems:"center"}}>
      <div style={{background:"#fff", border:"1px solid var(--line)", borderRadius:10, padding:"10px 12px"}}>
        <div style={{fontFamily:"var(--mono)", fontSize:10, color:"var(--muted-2)", letterSpacing:".1em", textTransform:"uppercase"}}>spec.md</div>
        <div style={{fontSize:12.5, color:"var(--ink-2)", marginTop:4, lineHeight:1.45}}>Add per-tenant rate limiting to the public ingest API…</div>
      </div>
      <span style={{color:"var(--blue)"}}>{Icon.arrow({size:16})}</span>
      <div style={{display:"flex", flexDirection:"column", gap:4, fontFamily:"var(--mono)", fontSize:11.5, color:"var(--ink-2)"}}>
        <div>📦 Epic · Rate limiting</div>
        <div style={{paddingLeft:14}}>📘 Story · Per-tenant policy</div>
        <div style={{paddingLeft:28, color:"var(--muted)"}}>✓ Task · middleware</div>
        <div style={{paddingLeft:28, color:"var(--muted)"}}>✓ Task · limiter</div>
      </div>
    </div>
  );
}

function IssueAnatomyMini() {
  const rows = [
    ["Objective", "Cap ingest at 1k req/min/tenant"],
    ["AI scope", "routes/ingest.ts, limiter/*"],
    ["Output", "Middleware + tests"],
    ["Validation", "✓ tests pass, ✓ docs updated"],
  ];
  return (
    <div style={{display:"flex", flexDirection:"column", gap:6}}>
      {rows.map((r, i) => (
        <div key={i} style={{display:"flex", gap:10, alignItems:"center"}}>
          <div style={{fontFamily:"var(--mono)", fontSize:10, letterSpacing:".1em", textTransform:"uppercase", color:"var(--muted-2)", width:84}}>{r[0]}</div>
          <div style={{fontSize:12.5, color:"var(--ink-2)"}}>{r[1]}</div>
        </div>
      ))}
    </div>
  );
}

function ExecutionPackMini() {
  return (
    <div style={{background:"#0a1230", borderRadius:10, padding:14, fontFamily:"var(--mono)", fontSize:12, color:"#e9ecf6", lineHeight:1.6}}>
      <div><span style={{color:"#6e8cff"}}>$</span> kaija execute <span style={{color:"#ffc870"}}>GRD-2412</span></div>
      <div style={{color:"rgba(233,236,246,.6)", paddingLeft:14}}>→ packing context (4 files, 312 lines)</div>
      <div style={{color:"rgba(233,236,246,.6)", paddingLeft:14}}>→ acceptance criteria attached</div>
      <div style={{color:"#6cd9a8", paddingLeft:14}}>✓ execution pack ready · .kaija/work/GRD-2412/</div>
    </div>
  );
}

function EvidenceMini() {
  return (
    <div style={{display:"flex", flexDirection:"column", gap:8}}>
      <div style={{display:"flex", gap:10, alignItems:"center", fontSize:13}}>
        <span style={{fontFamily:"var(--mono)", fontSize:11, color:"var(--muted)"}}>commit</span>
        <span style={{fontFamily:"var(--mono)", fontSize:12, background:"#f4f6fb", padding:"2px 8px", borderRadius:6}}>a3f81d2</span>
        <span style={{color:"var(--ink-2)"}}>feat: leaky-bucket limiter</span>
      </div>
      <div style={{display:"flex", gap:10, alignItems:"center", fontSize:13}}>
        <span style={{fontFamily:"var(--mono)", fontSize:11, color:"var(--muted)"}}>PR #284</span>
        <span className="tag green">merged</span>
        <span style={{color:"var(--ink-2)"}}>linked to GRD-2412</span>
      </div>
      <div style={{display:"flex", gap:10, alignItems:"center", fontSize:13}}>
        <span style={{fontFamily:"var(--mono)", fontSize:11, color:"var(--muted)"}}>jira</span>
        <span className="tag blue">In review</span>
        <span style={{color:"var(--muted)"}}>auto-transitioned</span>
      </div>
    </div>
  );
}

function HowItWorks() {
  const steps = [
    { n:"01", h:"Initialize the workspace", p:"Scaffold cognitive + operational workspaces and bind to your Jira project. KAIJA discovers your issue types, required fields, and permissions — nothing hardcoded.", cmds:["kaija init","kaija connect"] },
    { n:"02", h:"Discover, refine, and shape", p:"Extract intent from your brain-dump, refine specs and architecture under propose → review → apply, then compile a hierarchy proposal grounded in your Jira profile.", cmds:["kaija discover","kaija refine","kaija shape"] },
    { n:"03", h:"Create structured Jira work", p:"Materialize the proposal into Jira issues with objective, AI scope, expected output, prompt skeleton, and validation checklist. Readiness gates the write — no bypass.", cmds:["kaija create","kaija doctor"] },
    { n:"04", h:"Execute and sync evidence", p:"Build a self-contained execution pack at .kaija/work/<KEY>/ for Claude Code. Sync commits, PRs, and status transitions back to Jira when the work lands.", cmds:["kaija execute","kaija sync"] },
  ];
  const [active, setActive] = React.useState(0);
  return (
    <section className="section section-soft" id="how">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow">How it works</span>
          <h2>Four steps. One pipeline.</h2>
          <p className="lead">From spec to merged PR — every step is structured, traceable, and Jira-native.</p>
        </div>
        <div className="how-rail">
          {steps.map((s, i) => (
            <div key={i} className={"how-step " + (i===active ? "active" : "")} onMouseEnter={() => setActive(i)}>
              <span className="num">STEP {s.n}</span>
              <h3>{s.h}</h3>
              <p>{s.p}</p>
              <div className="cmds">
                {s.cmds.map((c, j) => <span key={j} className="cmd-chip">{c}</span>)}
              </div>
            </div>
          ))}
        </div>

        <KaijaTerminal active={active}/>
      </div>
    </section>
  );
}

function KaijaTerminal({ active }) {
  const lines = [
    [{p:"$"}, {t:"kaija init", k:"cmd"}, {o:"→ scaffolded kaija/ + .kaija/ · jira-neutral"}],
    [{p:"$"}, {t:"kaija connect", k:"cmd"}, {o:"✓ your-team.atlassian.net · GRD · 5 issue types discovered", c:"ok"}],
    [{p:"$"}, {t:"kaija discover", k:"cmd"}, {o:"→ extracted 7 sources from project-brain-dump/"}],
    [{p:"$"}, {t:"kaija refine specs", k:"cmd"}, {a:"--reasoner claude", k2:"arg"}, {o:"→ patch applied · specs/overview.md updated under fenced regions"}],
    [{p:"$"}, {t:"kaija readiness", k:"cmd"}, {o:"✓ specs:ready · architecture:ready · decisions:ready · constraints:partial", c:"ok"}],
    [{p:"$"}, {t:"kaija shape", k:"cmd"}, {a:"--output-file proposal.json", k2:"arg"}, {o:"→ 1 epic · 4 stories · 11 tasks proposed against GRD profile"}],
    [{p:"$"}, {t:"kaija create", k:"cmd"}, {a:"--project GRD --proposal-file proposal.json --confirm", k2:"arg"}, {o:"✓ created GRD-2410…2421 · readiness gate: ready", c:"ok"}],
    [{p:"$"}, {t:"kaija execute", k:"cmd"}, {a:"GRD-2412", k2:"arg"}, {o:"→ execution pack ready · .kaija/work/GRD-2412/"}],
    [{p:"$"}, {t:"kaija sync", k:"cmd"}, {a:'GRD-2412 --pr https://github.com/greind/kaija/pull/841 --status "In Review"', k2:"arg"}, {o:"✓ 2 commits + 1 PR linked · GRD-2412 → In Review", c:"ok"}],
    [{cur:true}],
  ];
  return (
    <div className="term" style={{maxWidth: 920, margin: "32px auto 0"}}>
      <div className="term-bar">
        <span className="dot" style={{background:"#ff6b5e"}}></span>
        <span className="dot" style={{background:"#ffc04a"}}></span>
        <span className="dot" style={{background:"#4ad07d"}}></span>
        <span className="label">~/projects/ingest · kaija@0.3.0</span>
      </div>
      <div className="term-body">
        {lines.map((row, i) => (
          <div key={i}>
            <div className="term-line">
              {row.map((tok, j) => {
                if (tok.cur) return <span key={j} className="term-cursor"/>;
                if (tok.p) return <span key={j} className="term-prompt">{tok.p}</span>;
                if (tok.t) return <span key={j} style={{color:"#6cd9a8"}}>{tok.t}</span>;
                if (tok.a) return <span key={j} style={{color:"#ffc870"}}> {tok.a}</span>;
                return null;
              })}
            </div>
            {row.find(t => t.o) && (
              <div className={"term-out " + (row.find(t=>t.c)?.c === "ok" ? "term-ok" : "")}>
                {row.find(t => t.o).o}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

function Architecture() {
  return (
    <section className="section" id="architecture">
      <div className="shell">
        <div className="section-head center">
          <span className="eyebrow">Architecture</span>
          <h2 style={{textAlign:"center"}}>A kernel between Jira, specs,<br/>AI agents, and delivery evidence.</h2>
          <p className="lead" style={{textAlign:"center"}}>KAIJA is not a standalone work system. Jira remains canonical — KAIJA adds the structure and intelligence layer around it.</p>
        </div>
        <div className="arch">
          <div className="arch-board">
              <svg className="arch-svg" viewBox="0 0 1000 460" preserveAspectRatio="none">
                <defs>
                  <linearGradient id="line-g" x1="0" x2="1">
                    <stop offset="0%" stopColor="#2A5BFF" stopOpacity="0.22"/>
                    <stop offset="100%" stopColor="#6e57ff" stopOpacity="0.22"/>
                  </linearGradient>
                </defs>
                <path d="M 200 130 C 350 130, 380 230, 500 230" stroke="url(#line-g)" strokeWidth="1" fill="none" strokeDasharray="3 5"/>
                <path d="M 200 330 C 350 330, 380 230, 500 230" stroke="url(#line-g)" strokeWidth="1" fill="none" strokeDasharray="3 5"/>
                <path d="M 800 130 C 650 130, 620 230, 500 230" stroke="url(#line-g)" strokeWidth="1" fill="none" strokeDasharray="3 5"/>
                <path d="M 800 330 C 650 330, 620 230, 500 230" stroke="url(#line-g)" strokeWidth="1" fill="none" strokeDasharray="3 5"/>
              </svg>
            <div className="arch-grid">
              <div className="arch-side">
                <div className="arch-tile">
                  <span className="label">Source of truth</span>
                  <h4>{Icon.jira({size:18})} &nbsp; Jira</h4>
                  <p>Epics, stories, tasks, sprints, fields, workflows. Canonical.</p>
                </div>
                <div className="arch-tile">
                  <span className="label">Input</span>
                  <h4>{Icon.spec({size:18})} &nbsp; Specs &amp; intent</h4>
                  <p>Markdown specs, brain dumps, architecture notes, decisions, transcripts.</p>
                </div>
              </div>
              <div className="arch-kernel">
                <div className="ring"></div>
                <div className="ribbon" style={{margin:"0 auto 14px"}}></div>
                <div style={{fontFamily:"var(--mono)", fontSize:11, color:"var(--muted)", letterSpacing:".12em", textTransform:"uppercase"}}>The kernel</div>
                <h3 style={{fontSize:28, margin:"6px 0", color:"var(--ink)"}}>KAIJA</h3>
                <p style={{fontSize:13.5, lineHeight:1.5, color:"var(--muted)", maxWidth:240, margin:"0 auto"}}>
                  Structures intent, hands off execution, captures evidence — all without leaving Jira.
                </p>
                <div style={{display:"flex", gap:6, justifyContent:"center", flexWrap:"wrap", marginTop:14}}>
                  {["discover","refine","shape","create","execute","sync"].map(c => <span key={c} className="cmd-chip">{c}</span>)}
                </div>
              </div>
              <div className="arch-side">
                <div className="arch-tile">
                  <span className="label">Execution</span>
                  <h4>{Icon.agent({size:18})} &nbsp; Claude Code / IDE</h4>
                  <p>Cursor, VS Code, CLI — agents receive execution packs.</p>
                </div>
                <div className="arch-tile">
                  <span className="label">Evidence</span>
                  <h4>{Icon.pr({size:18})} &nbsp; Git · GitHub · Bitbucket</h4>
                  <p>Branches, commits, PRs, synced back to issues.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.ProblemSection = ProblemSection;
window.SolutionSection = SolutionSection;
window.HowItWorks = HowItWorks;
window.Architecture = Architecture;