/* JohnyClaw landing — main app */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "eyes": "^^",
  "accent": "#3DD9FF",
  "lanes": 4,
  "showRingText": true,
  "headlinePunch": "built for parallel work."
}/*EDITMODE-END*/;

const SKILLS = [
  {
    title: "Backend",
    desc: "REST/GraphQL APIs, schema design, queues, auth. Ships PRs that pass review.",
    stack: ["Node", "Python", "Postgres", "Redis"],
    tier: "Senior",
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <ellipse cx="12" cy="6" rx="8" ry="3"/>
        <path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6"/>
        <path d="M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/>
      </svg>
    ),
  },
  {
    title: "DevOps",
    desc: "Kubernetes, IaC, CI/CD pipelines, monitoring. Sleeps so you can.",
    stack: ["Terraform", "K8s", "GH Actions", "AWS"],
    tier: "Senior",
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <circle cx="12" cy="12" r="3"/>
        <path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/>
      </svg>
    ),
  },
  {
    title: "Mobile",
    desc: "Native iOS / Android, React Native, app-store ops, performance budgets.",
    stack: ["Swift", "Kotlin", "RN", "Expo"],
    tier: "Mid+",
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <rect x="6" y="2" width="12" height="20" rx="3"/>
        <line x1="11" y1="18" x2="13" y2="18"/>
      </svg>
    ),
  },
  {
    title: "Frontend",
    desc: "React, design systems, a11y. Picky about kerning and spacing tokens.",
    stack: ["React", "TypeScript", "Tailwind"],
    tier: "Senior",
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <rect x="3" y="4" width="18" height="14" rx="2"/>
        <path d="M3 9h18M8 14l-2 2 2 2M12 14l4 4"/>
      </svg>
    ),
  },
  {
    title: "Data & ML",
    desc: "Pipelines, ETL, embeddings, RAG, light fine-tuning. Honest about what works.",
    stack: ["Python", "DuckDB", "PyTorch"],
    tier: "Mid",
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <path d="M3 12c0-2 4-4 9-4s9 2 9 4M3 12v6c0 2 4 4 9 4s9-2 9-4v-6"/>
        <path d="M3 12c0 2 4 4 9 4s9-2 9-4"/>
      </svg>
    ),
  },
  {
    title: "QA & Testing",
    desc: "Unit, integration, E2E. Writes the tests other agents skip.",
    stack: ["Vitest", "Playwright", "Cypress"],
    tier: "Senior",
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <path d="M9 4h6v3l-3 3-3-3V4z"/>
        <path d="M9 7L5 14c-1 2 0 5 2 6h10c2-1 3-4 2-6L15 7"/>
        <path d="M9 14h6"/>
      </svg>
    ),
  },
  {
    title: "Code Review",
    desc: "Reads diffs in seconds, spots regressions, leaves notes that don't sound mean.",
    stack: ["Any language", "Any size repo"],
    tier: "Senior",
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <path d="M9 18l-6-6 6-6M15 6l6 6-6 6M14 4l-4 16"/>
      </svg>
    ),
  },
  {
    title: "Docs & Onboarding",
    desc: "Reads your repo, writes the README you've been meaning to write since 2022.",
    stack: ["Markdown", "Mermaid", "ADRs"],
    tier: "Mid+",
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <path d="M5 4h10l4 4v12H5z"/>
        <path d="M14 4v5h5M9 13h6M9 17h6"/>
      </svg>
    ),
  },
];

function Brand() {
  return (
    <div className="brand">
      <div className="mark">
        <svg width="32" height="32" viewBox="0 0 32 32">
          <circle cx="16" cy="16" r="15" fill="#0E1525" stroke="#28385A"/>
          {/* mini crab */}
          <ellipse cx="16" cy="17" rx="7" ry="5" fill="#3DD9FF"/>
          <path d="M 11 14 Q 7 10 5 13 Q 6 16 9 14" fill="#3DD9FF"/>
          <path d="M 21 14 Q 25 10 27 13 Q 26 16 23 14" fill="#3DD9FF"/>
          <path d="M 9 19 Q 6 22 4 22 M 23 19 Q 26 22 28 22" stroke="#3DD9FF" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
          <circle cx="13.5" cy="16" r="1" fill="#0A0F1C"/>
          <circle cx="18.5" cy="16" r="1" fill="#0A0F1C"/>
          <line x1="16" y1="11" x2="16" y2="8" stroke="#3DD9FF" strokeWidth="1"/>
          <circle cx="16" cy="7" r="1" fill="#3DD9FF"/>
        </svg>
      </div>
      <span className="name">Johny<b>Claw</b></span>
    </div>
  );
}

function MascotStage({ eyes, accent, showRingText }) {
  return (
    <div className="mascot-stage">
      <div className="ring"></div>
      {showRingText && (
        <div className="ring-text">
          <svg viewBox="0 0 200 200">
            <defs>
              <path id="ringPath" d="M 100,100 m -86,0 a 86,86 0 1,1 172,0 a 86,86 0 1,1 -172,0"/>
            </defs>
            <text>
              <textPath href="#ringPath" startOffset="0">
                IMPLEMENT · VERIFY · LEARN · REPEAT · IMPLEMENT · VERIFY ·
              </textPath>
            </text>
          </svg>
        </div>
      )}
      <div className="glow"></div>
      <div className="floor"></div>
      <div className="crab">
        <CrabMascot eyes={eyes} accent={accent} />
      </div>
      <div className="tag t1">lanes: backend · ui · ops</div>
      <div className="tag t2">tasks_done: 1,847</div>
      <div className="tag t3">mode: shipping</div>
    </div>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const { eyes, accent, lanes, showRingText, headlinePunch } = tweaks;

  // apply accent to CSS var live
  React.useEffect(() => {
    document.documentElement.style.setProperty("--cyan", accent);
  }, [accent]);

  return (
    <main>
      <nav className="top">
        <Brand />
        <div className="links">
          <a href="#skills">skills</a>
          <a href="#how">how it works</a>
          <a href="#hire">start</a>
          <a href="#changelog">notes</a>
        </div>
        <div className="status-pill">
          <span className="status-dot"></span>
          <span>online · ready to build</span>
        </div>
      </nav>

      {/* HERO */}
      <section className="hero">
        <div>
          <div className="eyebrow">v0.4 · implementation agent</div>
          <h1>
            Meet JohnyClaw.<br/>
            He&rsquo;s <span className="scribble">{headlinePunch}</span>
          </h1>
          <p className="lede">
            JohnyClaw is an AI agent built to keep several implementation tracks moving at once.
            <b> Backend, frontend, mobile, DevOps</b> — he reads the context, breaks the work into pieces,
            ships the useful parts, and learns from every pass.
          </p>
          <div className="cta-row">
            <a className="btn btn-primary" href="#hire">
              See capabilities
              <svg className="arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M5 12h14M13 5l7 7-7 7"/>
              </svg>
            </a>
            <a className="btn btn-ghost" href="#how">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <polygon points="5,3 19,12 5,21"/>
              </svg>
              Watch the workflow
            </a>
          </div>

          <div className="quick-stats">
            <div className="stat">
              <div className="num">1.8<span className="unit">k</span></div>
              <div className="lbl mono">tasks shipped</div>
            </div>
            <div className="stat">
              <div className="num">99.98<span className="unit">%</span></div>
              <div className="lbl mono">uptime</div>
            </div>
            <div className="stat">
              <div className="num">{lanes}<span className="unit"> lanes</span></div>
              <div className="lbl mono">parallel work</div>
            </div>
          </div>
        </div>

        <MascotStage eyes={eyes} accent={accent} showRingText={showRingText} />
      </section>

      {/* SKILLS */}
      <section className="skills" id="skills">
        <div className="section-head">
          <div>
            <div className="label">// 02 · what he does</div>
            <h2>One agent. Many threads. Real implementation.</h2>
          </div>
          <div className="meta">
            JohnyClaw can move across the stack without losing the plot. Give him a repo, a product idea, or a half-finished tool and he turns it into a sequence of working changes.
          </div>
        </div>
        <div className="skill-grid">
          {SKILLS.map(s => (
            <div className="skill" key={s.title}>
              <div className="row1">
                <div className="ico">{s.icon}</div>
                <div className="tier mono">{s.tier}</div>
              </div>
              <h3>{s.title}</h3>
              <p className="desc">{s.desc}</p>
              <div className="stack">
                {s.stack.map(t => <span key={t}>{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* TERMINAL / HOW HE WORKS */}
      <section className="terminal-section" id="how">
        <div className="copy">
          <div className="label mono" style={{ color: "var(--cyan)", fontSize: 12, textTransform: "uppercase", letterSpacing: "0.12em" }}>// 03 · how he works</div>
          <h2>Plan. Ship. <em>Learn.</em><br/>Then do it again.</h2>
          <p>
            JohnyClaw runs a tight loop: read context, propose a plan, execute, verify, learn.
            You stay in the driver&rsquo;s seat. He keeps the boring and brittle parts moving without pretending product judgment is automatic.
          </p>
          <ul className="inline-checks">
            <li><span className="check-ico">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 12l5 5L20 7"/></svg>
            </span>Reads your codebase before he touches it</li>
            <li><span className="check-ico">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 12l5 5L20 7"/></svg>
            </span>Writes tests by default — not as an afterthought</li>
            <li><span className="check-ico">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 12l5 5L20 7"/></svg>
            </span>Can juggle multiple tracks without mixing up scope</li>
            <li><span className="check-ico">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 12l5 5L20 7"/></svg>
            </span>Leaves a trail: diffs, screenshots, test notes, rationale</li>
          </ul>
        </div>
        <Terminal />
      </section>

      {/* HIRE */}
      <section className="hire" id="hire">
        <div className="hire-card">
          <div>
            <div className="badge">
              <span className="status-dot" style={{ width: 6, height: 6 }}></span>
              ready to build
            </div>
            <h2>Give JohnyClaw a messy project.<br/>He turns it into shipped pieces.</h2>
            <p>
              The point is simple: turn messy projects into working changes without losing context.
              He is fast at switching tracks, calm with messy repos, and stubborn about finishing the implementation.
            </p>
            <div className="cta-row">
              <a className="btn btn-primary" href="#">Start with a project
                <svg className="arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M5 12h14M13 5l7 7-7 7"/>
                </svg>
              </a>
              <a className="btn btn-ghost" href="#how">Watch the loop</a>
            </div>
          </div>
          <div className="price-card">
            <div className="row head"><span>// working model</span><span>v0.4</span></div>
            <div className="price">{lanes}<span className="cents"> lanes</span></div>
            <div className="price-sub">parallel implementation, one coherent memory of the project.</div>
            <div className="row"><span>input</span><span className="v">repo / notes / ticket</span></div>
            <div className="row"><span>output</span><span className="v">working changes</span></div>
            <div className="row"><span>rhythm</span><span className="v">plan → ship → verify</span></div>
            <div className="row"><span>ownership</span><span className="v">yours</span></div>
            <div className="row"><span>guardrails</span><span className="v">always-on</span></div>
          </div>
        </div>
      </section>

      <footer>
        <div>© 2026 JohnyClaw Labs · parallel implementation agent</div>
        <div className="links">
          <a href="#">docs</a>
          <a href="#">changelog</a>
          <a href="#">github</a>
          <a href="#">contact</a>
        </div>
      </footer>

      {/* TWEAKS */}
      <TweaksPanel title="Tweaks">
        <TweakSection title="Mascot">
          <TweakRadio label="Eye expression" value={eyes} options={[
            { value: "^^", label: "^^" },
            { value: "oo", label: "oo" },
            { value: "--", label: "--" },
            { value: ">_<", label: ">_<" },
          ]} onChange={v => setTweak("eyes", v)} />
          <TweakColor label="Accent color" value={accent} onChange={v => setTweak("accent", v)} />
          <TweakToggle label="Ring text" value={showRingText} onChange={v => setTweak("showRingText", v)} />
        </TweakSection>
        <TweakSection title="Copy">
          <TweakText label="Headline punch" value={headlinePunch} onChange={v => setTweak("headlinePunch", v)} />
        </TweakSection>
        <TweakSection title="Workload">
          <TweakSlider label="Parallel lanes" value={lanes} min={1} max={8} step={1} onChange={v => setTweak("lanes", v)} />
        </TweakSection>
      </TweaksPanel>
    </main>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);