// KAIJA — Hero with workflow diagram
const { useState: useStateHero } = React;

function Hero({ onJoinBeta }) {
  const steps = [
    { label: "Discover", name: "Brain-dump intake", meta: "kaija discover", icon: Icon.spec, cls: "s1" },
    { label: "Refine",   name: "Cognitive workspace", meta: "kaija refine", icon: Icon.cli, cls: "s2" },
    { label: "Shape",    name: "Hierarchy proposal", meta: "kaija shape", icon: Icon.cli, cls: "s3" },
    { label: "Create",   name: "Jira issues", meta: "kaija create", icon: Icon.jira, cls: "s4" },
    { label: "Execute",  name: "Claude Code", meta: "kaija execute", icon: Icon.agent, cls: "s5" },
    { label: "Sync",     name: "Jira audit trail", meta: "kaija sync", icon: Icon.metrics, cls: "s6" },
  ];
  const [active, setActive] = useStateHero(2);
  React.useEffect(() => {
    const t = setInterval(() => setActive((a) => (a + 1) % steps.length), 1800);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="hero" id="top">
      <div className="hero-grid-bg"></div>
      <div className="shell hero-content">
        <span className="pill">
          <span className="pill-dot"></span>
          <span style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".1em", textTransform:"uppercase", color:"var(--muted)"}}>Developer Preview</span>
          <span style={{color:"var(--ink-2)"}}>· Kernel for AI + Jira Autonomy</span>
        </span>
        <h1 style={{marginTop: 28}}>
          Spec-driven execution<br/>
          for <span className="hl-blue">AI-native software teams</span> using Jira.
        </h1>
        <p className="hero-sub">
          KAIJA turns specs and product intent into structured Jira work, hands execution
          to Claude Code, and syncs commits, PRs, and delivery evidence back to Jira.
        </p>
        <div className="hero-actions">
          <a className="btn btn-primary" href="beta.html">
            Join the beta {Icon.arrow({size:15})}
          </a>
          <a className="btn btn-ghost" href="docs/docs-preview.html">Read the docs</a>
          <a className="btn btn-disabled" href="marketplace.html" title="Listing not yet live" style={{textDecoration:"none"}}>
            Atlassian Marketplace
            <span className="coming-soon-badge">Coming Soon</span>
          </a>
        </div>

        {/* Workflow diagram */}
        <div className="flow">
          <div className="flow-head">
            <div className="flow-head-left">
              <span className="flow-dot r"></span>
              <span className="flow-dot y"></span>
              <span className="flow-dot g"></span>
              <span className="flow-head-title">kaija › live execution graph</span>
            </div>
            <div className="flow-head-status">
              <span className="dot"></span>
              <span>connected · jira-eu-1 · sprint 41</span>
            </div>
          </div>
          <div className="flow-rail">
            {steps.map((s, i) => {
              const ActiveIcon = s.icon;
              return (
                <div key={i} className={"flow-step " + s.cls + (i===active ? " active" : "")}>
                  <div className="icon">{ActiveIcon({size:18})}</div>
                  <div className="label">{`0${i+1} · ${s.label}`}</div>
                  <div className="name">{s.name}</div>
                  <div className="meta">{s.meta}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;