---
const features = [
  {
    title: "Zero config, one command",
    desc: "No setup, no account, no config files. Just run npx vibe-replay and pick a session. Works instantly with existing Claude Code and Cursor sessions.",
    icon: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" /></svg>`,
  },
  {
    title: "One file, works offline",
    desc: "Every replay is a single self-contained HTML file. Zero external requests. Drop it in Slack, email it, open it on a plane. No server needed, ever.",
    icon: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>`,
  },
  {
    title: "Claude Code + Cursor",
    desc: "Supports both providers out of the box. Sessions are auto-discovered from local files — including multi-file and resumed sessions.",
    icon: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" /></svg>`,
  },
  {
    title: "Personal insights dashboard",
    desc: "Your AI coding wrapped: GitHub-style activity heatmap, streaks, weekly trends, top projects, model usage, and cost tracking. Browse all sessions across projects with the local dashboard.",
    icon: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" /></svg>`,
  },
  {
    title: "Session analytics & cost tracking",
    desc: "Deep per-session analytics: token burn over time, context window usage, cache hit rates, tool call breakdown, model breakdown, and cost estimates with data-quality hints.",
    icon: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /></svg>`,
  },
  {
    title: "Share & export anywhere",
    desc: "Publish to GitHub Gist for a shareable link. Export as markdown summary or animated SVG for PRs. Add comments that travel with the replay. Secret redaction built in.",
    icon: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" /></svg>`,
  },
];
---

<section id="features" class="relative py-16 md:py-32 px-6">
  <!-- Subtle gradient divider -->
  <div class="absolute top-0 left-1/2 -translate-x-1/2 w-3/4 h-px bg-gradient-to-r from-transparent via-border to-transparent"></div>

  <div class="max-w-5xl mx-auto">
    <!-- Section header -->
    <div class="text-center mb-10 md:mb-20">
      <span class="block text-accent/70 font-mono text-sm font-medium tracking-wider uppercase mb-3">Why vibe-replay</span>
      <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight">
        Built for how developers actually work
      </h2>
    </div>

    <!-- Feature grid -->
    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
      {features.map((feature) => (
        <div class="group p-6 rounded-2xl border border-border/40 bg-surface-1/30 hover:bg-surface-1/60 hover:border-accent/20 transition-all duration-300">
          <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-accent/10 to-cyan-400/5 flex items-center justify-center text-accent mb-4 group-hover:bg-accent/20 transition-colors">
            <Fragment set:html={feature.icon} />
          </div>
          <h3 class="text-lg font-semibold mb-2">{feature.title}</h3>
          <p class="text-text-secondary text-sm leading-relaxed">{feature.desc}</p>
        </div>
      ))}
    </div>
  </div>
</section>
