// KAIJA — Jira-native, Beta signup, Developer preview, Footer
function JiraNative() {
  return (
    <section className="section" id="marketplace">
      <div className="shell">
        <div className="jira-native">
          <div>
            <span className="eyebrow">Jira-native</span>
            <h2 style={{marginTop:14}}>Built for Jira-native teams.</h2>
            <p className="lead" style={{marginTop:14}}>
              KAIJA is designed as a first-class Jira plugin — not a parallel work system.
              Every concept maps to Jira primitives your team already knows.
            </p>
            <div className="jira-list">
              {[
                ["Forge app path", "Designed for a Forge app path and Atlassian Marketplace distribution."],
                ["Issue panels", "KAIJA appears as a panel inside the issue you already have open."],
                ["Custom fields", "AI Scope, Agent Responsible, Prompt Skeleton, and Expected Output as structured Jira fields."],
                ["Agile workflow integration", "Issues transition through your existing Jira workflows and remain visible on boards and roadmaps."],
                ["Minimal duplication", "If Jira already does it, we don't reinvent it."],
              ].map((r, i) => (
                <div className="row" key={i}>
                  <div className="check">{Icon.check({size:12})}</div>
                  <div className="text"><b>{r[0]}.</b>&nbsp; {r[1]}</div>
                </div>
              ))}
            </div>
            <div style={{marginTop:28, display:"flex", gap:10, alignItems:"center", flexWrap:"wrap"}}>
              <button className="btn btn-disabled" title="Listing not yet live">
                Install from Atlassian Marketplace
                <span className="coming-soon-badge">Coming Soon</span>
              </button>
              <a href="beta.html" className="btn btn-link">Try the developer preview {Icon.arrow({size:14})}</a>
            </div>
          </div>
          <div className="issue-mock">
            <div className="browser">
              <span className="dot" style={{background:"#ff6b5e"}}></span>
              <span className="dot" style={{background:"#ffc04a"}}></span>
              <span className="dot" style={{background:"#4ad07d"}}></span>
              <span className="url">your-team.atlassian.net / browse / GRD-2412</span>
            </div>
            <div className="body">
              <div className="issue-row">
                <span className="issue-key">GRD-2412</span>
                <span className="tag blue">In progress</span>
                <span className="tag amber">Sprint 41</span>
              </div>
              <div className="issue-title">Add per-tenant rate-limiting to the public ingest API</div>
              <div className="issue-meta">
                <div><div className="k">Assignee</div><div className="v">KAIJA · Planner</div></div>
                <div><div className="k">Iteration</div><div className="v">Sprint 41</div></div>
                <div><div className="k">Estimate</div><div className="v">5 pts</div></div>
              </div>
              <div className="kaija-panel">
                <div className="kaija-panel-head">
                  <span style={{width:8, height:8, borderRadius:99, background:"var(--blue)"}}></span>
                  KAIJA · 4 implementation tasks
                </div>
                <div className="task-row done">
                  <span className="check">{Icon.check({size:10})}</span>
                  <span className="label">Add tenant_id middleware to ingest router</span>
                  <span className="file">routes/ingest.ts</span>
                </div>
                <div className="task-row done">
                  <span className="check">{Icon.check({size:10})}</span>
                  <span className="label">Implement leaky-bucket limiter (Redis backend)</span>
                  <span className="file">limiter/bucket.ts</span>
                </div>
                <div className="task-row partial">
                  <span className="check">●</span>
                  <span className="label">Wire limiter into ingest pipeline + tests</span>
                  <span className="file">pipeline/ingest.spec.ts</span>
                </div>
                <div className="task-row">
                  <span className="check"></span>
                  <span className="label">Document rate-limit headers in OpenAPI</span>
                  <span className="file">openapi.yaml</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BetaSignup({ formRef }) {
  const [form, setForm] = React.useState({ name:"", email:"", company:"", usage:"growing", goal:"" });
  const [submitted, setSubmitted] = React.useState(false);
  const set = (k, v) => setForm(f => ({...f, [k]: v}));
  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };
  return (
    <section className="section section-soft" id="beta" ref={formRef}>
      <div className="shell">
        <div className="section-head center">
          <span className="eyebrow">Beta</span>
          <h2 style={{textAlign:"center"}}>Join the KAIJA beta.</h2>
          <p className="lead" style={{textAlign:"center"}}>Be one of the first teams to test spec-driven, agent-ready execution inside Jira.</p>
        </div>
        <div className="beta">
          <div className="beta-side">
            <div className="ribbon"></div>
            <h3 style={{fontSize:24, fontWeight:600, color:"var(--ink)"}}>What you get in the beta</h3>
            <p style={{color:"var(--muted)", fontSize:15, lineHeight:1.55}}>
              Hands-on access to the KAIJA CLI, direct line to the engineering team, and the chance to shape
              what marketplace KAIJA looks like.
            </p>
            <div className="beta-list">
              {[
                "Early CLI access",
                "Private setup guidance",
                "Direct feedback loop with the KAIJA team",
                "Early documentation access",
                "Marketplace launch updates",
              ].map((s, i) => (
                <div className="row" key={i}>
                  <span className="dot"></span>
                  <span>{s}</span>
                </div>
              ))}
            </div>
            <div style={{marginTop:"auto", paddingTop:24, fontFamily:"var(--mono)", fontSize:11.5, color:"var(--muted)", letterSpacing:".05em"}}>
              No credit card. No Marketplace install required during developer preview.
            </div>
          </div>
          {submitted ? (
            <div className="form-success" style={{alignSelf:"start", padding:"40px", flexDirection:"column", textAlign:"center", gap:18}}>
              <div style={{width:56, height:56, borderRadius:999, background:"var(--green)", color:"#fff", display:"flex", alignItems:"center", justifyContent:"center"}}>{Icon.check({size:28})}</div>
              <h3 style={{fontSize:22}}>Request received</h3>
              <p style={{color:"#0c6f4d", fontSize:14, maxWidth:380}}>
                Thanks, {form.name || "there"}. We'll review and get back within two business days
                with onboarding instructions and your CLI key.
              </p>
            </div>
          ) : (
            <form className="form" onSubmit={onSubmit}>
              <div className="form-row">
                <label>Name</label>
                <input required value={form.name} onChange={e=>set("name", e.target.value)} placeholder="Alex Lindqvist"/>
              </div>
              <div className="form-row">
                <label>Work email</label>
                <input required type="email" value={form.email} onChange={e=>set("email", e.target.value)} placeholder="alex@yourcompany.com"/>
              </div>
              <div className="form-row full">
                <label>Company</label>
                <input required value={form.company} onChange={e=>set("company", e.target.value)} placeholder="Your company"/>
              </div>
              <div className="form-row full">
                <label>Jira usage</label>
                <div className="form-radio-group">
                  {[["small","Solo / small team","≤ 10 devs"],["growing","Growing engineering team","10 – 100 devs"],["enterprise","Enterprise / platform team","100+ devs"]].map(o => (
                    <label key={o[0]} className={"form-radio " + (form.usage===o[0] ? "active" : "")}>
                      <input type="radio" name="usage" value={o[0]} checked={form.usage===o[0]} onChange={()=>set("usage", o[0])} style={{display:"none"}}/>
                      <span className="r-dot"></span>
                      <span><b>{o[1]}</b><span style={{color:"var(--muted)", marginLeft:6, fontWeight:400}}>{o[2]}</span></span>
                    </label>
                  ))}
                </div>
              </div>
              <div className="form-row full">
                <label>What would you like to use KAIJA for?</label>
                <textarea value={form.goal} onChange={e=>set("goal", e.target.value)} placeholder="e.g. We want Claude Code to pick up Jira issues without our PMs rewriting every spec into AI-friendly tickets."/>
              </div>
              <div className="form-row full" style={{flexDirection:"row", justifyContent:"space-between", alignItems:"center"}}>
                <span style={{fontSize:12, color:"var(--muted)"}}>By submitting, you agree to our beta terms.</span>
                <button type="submit" className="btn btn-primary">Request beta access {Icon.arrow({size:14})}</button>
              </div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function DeveloperPreview() {
  return (
    <section className="section" id="developers">
      <div className="shell">
        <div className="dev-grid">
          <div>
            <span className="eyebrow">Developer preview</span>
            <h2 style={{marginTop:14}}>Developer preview first.<br/>Marketplace later.</h2>
            <p className="lead" style={{marginTop:14}}>
              KAIJA ships first as a CLI for technical testers. The Forge / Marketplace listing
              builds on the same kernel — it's just a different surface.
            </p>

            <div style={{marginTop:24, display:"flex", flexDirection:"column", gap:10}}>
              {[
                ["Available now", "Developer Preview", "CLI access for early testers", "live"],
                ["Coming", "GitHub / Public Preview", "Public source-available release", "soon"],
                ["Coming soon", "Atlassian Marketplace", "Forge app listing", "later"],
              ].map(([state, title, sub, k], i) => (
                <div key={i} style={{display:"flex", alignItems:"center", gap:14, padding:"12px 14px", border:"1px solid var(--line)", borderRadius:10, background:"var(--bg, #fff)"}}>
                  <span style={{
                    fontFamily:"var(--mono)", fontSize:10.5, fontWeight:600, letterSpacing:".08em", textTransform:"uppercase",
                    padding:"3px 8px", borderRadius:999,
                    background: k==="live" ? "rgba(42,91,255,0.08)" : "rgba(0,0,0,0.04)",
                    color: k==="live" ? "var(--blue)" : "var(--muted)",
                    border: k==="live" ? "1px solid rgba(42,91,255,0.18)" : "1px solid var(--line)",
                    minWidth: 108, textAlign:"center",
                  }}>{state}</span>
                  <div style={{display:"flex", flexDirection:"column"}}>
                    <span style={{fontSize:14.5, fontWeight:600, color:"var(--ink)"}}>{title}</span>
                    <span style={{fontSize:12.5, color:"var(--muted)"}}>{sub}</span>
                  </div>
                </div>
              ))}
            </div>

            <div style={{
              marginTop:20, padding:"14px 16px",
              borderRadius:10,
              background:"rgba(42,91,255,0.05)",
              border:"1px solid rgba(42,91,255,0.15)",
              fontSize:13.5, lineHeight:1.5, color:"var(--ink-2)",
            }}>
              <strong style={{color:"var(--ink)"}}>KAIJA does not write production code.</strong>{" "}
              It creates the execution pack. Claude Code or a human implements the work.
            </div>
            <div style={{marginTop:32, display:"flex", gap:10, flexWrap:"wrap"}}>
              <a href="docs/docs-preview.html" className="btn btn-primary">View developer docs {Icon.arrow({size:14})}</a>
              <a href="github-preview.html" className="btn btn-disabled" style={{textDecoration:"none"}}>{Icon.github({size:14})} GitHub <span className="coming-soon-badge">Soon</span></a>
            </div>
          </div>
          <div className="code-block">
            <div><span className="cb-comment"># initialize a project workspace</span></div>
            <div><span className="cb-cmd">kaija</span> init</div>
            <div><span className="cb-cmd">kaija</span> connect</div>
            <div style={{color:"#6cd9a8"}}>✓ your-team.atlassian.net · GRD · 5 issue types discovered</div>
            <div style={{height:8}}></div>
            <div><span className="cb-comment"># shape a Jira hierarchy from your brain-dump</span></div>
            <div><span className="cb-cmd">kaija</span> discover</div>
            <div><span className="cb-cmd">kaija</span> shape --output-file <span className="cb-arg">proposal.json</span></div>
            <div style={{color:"rgba(233,236,246,.7)"}}>→ 1 epic · 4 stories · 11 tasks proposed</div>
            <div style={{height:8}}></div>
            <div><span className="cb-comment"># materialize into Jira</span></div>
            <div><span className="cb-cmd">kaija</span> create kaija --project <span className="cb-key">GRD</span> --proposal-file <span className="cb-arg">proposal.json</span> --preview</div>
            <div style={{color:"#6cd9a8"}}>✓ created GRD-2410…2421</div>
            <div style={{height:8}}></div>
            <div><span className="cb-comment"># hand off one issue + sync evidence back</span></div>
            <div><span className="cb-cmd">kaija</span> execute <span className="cb-key">GRD-2412</span></div>
            <div><span className="cb-cmd">kaija</span> sync <span className="cb-key">GRD-2412</span> --pr <span className="cb-arg">&lt;url&gt;</span> --status <span className="cb-arg">"In Review"</span></div>
            <div style={{color:"#6cd9a8"}}>✓ 2 commits + 1 PR linked · GRD-2412 → In Review</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer id="docs">
      <div className="shell">
        <div className="foot-grid">
          <div className="foot-brand">
            <img src="assets/greind-logo.png" alt="Greind" className="greind-logo"/>
            <p style={{fontSize:13.5, color:"var(--muted)", marginTop:14}}>
              KAIJA is part of a family of development products from Greind.
            </p>
          </div>
          <div className="foot-col">
            <h5>Product</h5>
            <ul>
              <li><a href="#product">Overview</a></li>
              <li><a href="#how">How it works</a></li>
              <li><a href="forge-app.html">Architecture</a></li>
              <li><a href="beta.html">Join beta</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Developers</h5>
            <ul>
              <li><a href="docs/docs-preview.html">Docs</a></li>
              <li><a href="docs/docs-preview.html#/cli/overview">CLI reference</a></li>
              <li><a href="docs/docs-preview.html#/changelog">Changelog</a></li>
              <li><a href="github-preview.html">GitHub preview <span className="coming-soon-badge">Soon</span></a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Company</h5>
            <ul>
              <li><a href="about.html">About Greind</a></li>
              <li><a href="docs/docs-preview.html#/security">Security</a></li>
              <li><a href="docs/docs-preview.html#/privacy">Privacy</a></li>
              <li><a href="support.html">Support</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Marketplace</h5>
            <ul>
              <li><a href="marketplace.html">Atlassian listing <span className="coming-soon-badge">Soon</span></a></li>
              <li><a href="forge-app.html">Forge app</a></li>
              <li><a href="beta.html">Beta access</a></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bar">
          <div>© 2026 Greind. KAIJA — Kernel for AI + Jira Autonomy.</div>
          <div style={{fontFamily:"var(--mono)", fontSize:11.5, letterSpacing:".05em"}}>
            v0.3 · developer preview
          </div>
        </div>
      </div>
    </footer>
  );
}

window.JiraNative = JiraNative;
window.BetaSignup = BetaSignup;
window.DeveloperPreview = DeveloperPreview;
window.Footer = Footer;