/** Homepage — marketing landing page with hero, features, and CTA. */
import type { Metadata } from 'next'
import Image from 'next/image'

/** Page metadata for the homepage. */
export const metadata: Metadata = {
  title: 'Huskies — Story-Driven Development for AI Agents',
  description:
    'Huskies is an autonomous development pipeline that turns user stories into tested, shipped code using AI agents.',
}

/** Renders the huskies marketing homepage. */
export default function HomePage() {
  return (
    <div className="page">
      <header className="reveal r1">
        <a href="/" className="logo">huskies</a>
        <nav>
          <a href="#how">How it works</a>
          <a href="#features">Features</a>
          <div className="nav-dropdown">
            <a href="#" className="nav-cta nav-dropdown-toggle">Start</a>
            <div className="nav-dropdown-menu">
              <a href="/docs/">Docs</a>
              <a href="https://code.crashlabs.io/crashlabs/huskies">Source</a>
              <a href="https://code.crashlabs.io/crashlabs/huskies/releases">Releases</a>
            </div>
          </div>
        </nav>
      </header>

      <section className="hero">
        <div className="hero-graphic reveal r1">
          <Image src="/husky.png" alt="" className="hero-husky" width={160} height={160} />
        </div>
        <p className="hero-kicker reveal r1">Story-driven development</p>
        <h1 className="reveal r2">
          Coding agents are huskies,<br />not <span className="glow">labradors.</span>
        </h1>
        <p className="hero-sub reveal r3">
          They&apos;re enthusiastic, sometimes wild, and they&apos;ll happily wander off on their own. But put
          them in a harness and they&apos;ll take you anywhere. Huskies is the harness &mdash; a story-driven
          pipeline that turns coding agents into a disciplined team.
        </p>

        <div className="pipeline reveal r4">
          <div className="pipe-stage">
            <span className="pipe-dot"></span>
            <span className="pipe-label">Story</span>
          </div>
          <span className="pipe-line"></span>
          <div className="pipe-stage">
            <span className="pipe-dot active"></span>
            <span className="pipe-label">Implement</span>
          </div>
          <span className="pipe-line"></span>
          <div className="pipe-stage">
            <span className="pipe-dot"></span>
            <span className="pipe-label">QA</span>
          </div>
          <span className="pipe-line"></span>
          <div className="pipe-stage">
            <span className="pipe-dot"></span>
            <span className="pipe-label">Merge</span>
          </div>
          <span className="pipe-line"></span>
          <div className="pipe-stage">
            <span className="pipe-dot done"></span>
            <span className="pipe-label">Done</span>
          </div>
        </div>
      </section>

      <section id="how" className="how-section">
        <h2 className="section-title reveal r5">How it works</h2>
        <ol className="steps">
          <li className="step reveal r5">
            <span className="step-num">01</span>
            <div className="step-body">
              <h3>Write a story</h3>
              <p>Describe what you want with acceptance criteria. From your IDE, a chat room, or WhatsApp.</p>
            </div>
          </li>
          <li className="step reveal r5">
            <span className="step-num">02</span>
            <div className="step-body">
              <h3>Agent picks it up</h3>
              <p>A coder agent creates a feature branch, implements the code, and writes tests against your criteria.</p>
            </div>
          </li>
          <li className="step reveal r6">
            <span className="step-num">03</span>
            <div className="step-body">
              <h3>Quality gates run</h3>
              <p>Linters, tests, and compilation checks run automatically. Nothing moves forward until everything passes.</p>
            </div>
          </li>
          <li className="step reveal r6">
            <span className="step-num">04</span>
            <div className="step-body">
              <h3>Merge &amp; land</h3>
              <p>A merge agent resolves conflicts and squash-merges to your main branch. You review and accept.</p>
            </div>
          </li>
        </ol>
      </section>

      <section id="features" className="features-section">
        <h2 className="section-title reveal r7">Features</h2>
        <div className="feature-grid">
          <div className="feature reveal r7">
            <div className="feature-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
              </svg>
            </div>
            <h3>The Harness</h3>
            <p>
              Stories define the change. Tests define the truth. Code defines the reality. Every agent runs on
              rails &mdash; nothing ships without acceptance criteria.
            </p>
          </div>
          <div className="feature reveal r7">
            <div className="feature-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <circle cx="18" cy="5" r="3" />
                <circle cx="6" cy="12" r="3" />
                <circle cx="18" cy="19" r="3" />
                <path d="M8.59 13.51l6.83 3.98M15.41 6.51l-6.82 3.98" />
              </svg>
            </div>
            <h3>The Pack</h3>
            <p>
              Coder, QA, and merge agents work in parallel across isolated git worktrees. A coordinated pack, not
              a lone wolf. Configure agent count, models, and budgets.
            </p>
          </div>
          <div className="feature reveal r8">
            <div className="feature-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
              </svg>
            </div>
            <h3>Chat Anywhere</h3>
            <p>
              Control the pipeline from Matrix, WhatsApp, Slack, or the built-in web UI. Create stories, start
              agents, check status.
            </p>
          </div>
          <div className="feature reveal r8">
            <div className="feature-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
              </svg>
            </div>
            <h3>You&apos;re the Musher</h3>
            <p>
              Agents implement, test, and merge independently. You set the direction and approve what ships. Every
              story is traceable from request to release.
            </p>
          </div>
        </div>
      </section>

      <section className="cta-section reveal r8">
        <h2>Interested?</h2>
        <p>
          Huskies is built by <a href="https://crashlabs.io">Crash Labs</a>. Get in touch at{' '}
          <a href="mailto:hello@huskies.dev">hello@huskies.dev</a>.
        </p>
      </section>

      <footer className="reveal r8">
        <span>&copy; 2026 Libby Labs Ltd.</span>
        <a href="mailto:hello@huskies.dev">Get in touch</a>
        <a href="/privacy">Privacy Policy</a>
      </footer>
    </div>
  )
}
