"use client";

import { useEffect, useRef, useState } from "react";

export default function Home() {
  const [activeSection, setActiveSection] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("all");
  const [expandedChanges, setExpandedChanges] = useState<Set<string>>(
    new Set()
  );
  const sectionsRef = useRef<(HTMLElement | null)[]>([]);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add(
              "animate-in",
              "fade-in-0",
              "slide-in-from-top-2"
            );
            setActiveSection(entry.target.id);
          }
        });
      },
      { threshold: 0.3, rootMargin: "0px 0px -20% 0px" }
    );

    // Add initial animation classes to sections that are already visible
    sectionsRef.current.forEach((section) => {
      if (section) {
        const rect = section.getBoundingClientRect();
        const isVisible = rect.top < window.innerHeight && rect.bottom > 0;
        if (isVisible) {
          section.classList.add(
            "animate-in",
            "fade-in-0",
            "slide-in-from-top-2"
          );
        }
        observer.observe(section);
      }
    });

    return () => observer.disconnect();
  }, []);

  const toggleChange = (changeId: string) => {
    setExpandedChanges((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(changeId)) {
        newSet.delete(changeId);
      } else {
        newSet.add(changeId);
      }
      return newSet;
    });
  };

  const changelogEntries = [
    {
      version: "2.1.0",
      date: "January 15, 2025",
      summary:
        "Multi-agent orchestration, custom tool integration, and 40% faster response times.",
      changes: [
        {
          category: "feature",
          title: "Multi-Agent Orchestration",
          description:
            "Agents can now coordinate with each other to solve complex tasks. Define workflows where multiple specialized agents collaborate seamlessly.",
        },
        {
          category: "feature",
          title: "Custom Tool Integration",
          description:
            "Build and integrate your own tools with our new SDK. Extend agent capabilities with domain-specific functions and APIs.",
        },
        {
          category: "improvement",
          title: "40% Faster Response Times",
          description:
            "Optimized inference pipeline reduces latency across all agent interactions. Average response time now under 800ms.",
        },
      ],
    },
    {
      version: "2.0.0",
      date: "December 20, 2024",
      summary:
        "Memory system 2.0, visual understanding, enhanced reasoning, and rate limiting fixes.",
      changes: [
        {
          category: "feature",
          title: "Memory System 2.0",
          description:
            "Agents now maintain long-term context across conversations. Persistent memory enables more coherent multi-session interactions.",
        },
        {
          category: "feature",
          title: "Visual Understanding",
          description:
            "New vision capabilities allow agents to analyze images, screenshots, and diagrams. Multimodal reasoning unlocks new use cases.",
        },
        {
          category: "improvement",
          title: "Enhanced Reasoning Engine",
          description:
            "Upgraded to GPT-4.5 with improved chain-of-thought processing. Better handling of complex logical tasks and edge cases.",
        },
        {
          category: "fix",
          title: "Fixed Rate Limiting Issues",
          description:
            "Resolved intermittent 429 errors during high-traffic periods. Implemented adaptive request throttling.",
        },
      ],
    },
    {
      version: "1.8.0",
      date: "November 28, 2024",
      summary:
        "Real-time streaming, dashboard redesign, and WebSocket stability improvements.",
      changes: [
        {
          category: "feature",
          title: "Real-Time Streaming",
          description:
            "Agent responses now stream in real-time for improved user experience. See thinking process as it happens.",
        },
        {
          category: "improvement",
          title: "Dashboard Redesign",
          description:
            "Completely rebuilt analytics dashboard with better insights into agent performance and usage patterns.",
        },
        {
          category: "fix",
          title: "WebSocket Stability",
          description:
            "Fixed connection drops during long-running agent tasks. Improved reconnection logic and error handling.",
        },
      ],
    },
    {
      version: "1.7.0",
      date: "October 10, 2024",
      summary:
        "Agent templates, improved API documentation, and token counting fixes.",
      changes: [
        {
          category: "feature",
          title: "Agent Templates",
          description:
            "Pre-built agent templates for common use cases. Get started faster with customer support, research, and coding assistants.",
        },
        {
          category: "improvement",
          title: "API Documentation",
          description:
            "Comprehensive API docs with interactive examples. New SDK guides for Python, TypeScript, and Go.",
        },
        {
          category: "fix",
          title: "Token Counting Accuracy",
          description:
            "Fixed discrepancies in token usage reporting. Billing now reflects actual consumption more accurately.",
        },
      ],
    },
  ];

  const categories = [
    { id: "all", label: "All Updates" },
    { id: "feature", label: "Features" },
    { id: "improvement", label: "Improvements" },
    { id: "fix", label: "Bug Fixes" },
  ];

  const getCategoryColor = (category: string) => {
    switch (category) {
      case "feature":
        return "text-chart-1";
      case "improvement":
        return "text-chart-2";
      case "fix":
        return "text-chart-5";
      default:
        return "text-muted-foreground";
    }
  };

  const getCategoryLabel = (category: string) => {
    switch (category) {
      case "feature":
        return "New";
      case "improvement":
        return "Improved";
      case "fix":
        return "Fixed";
      default:
        return "";
    }
  };

  const filteredEntries = changelogEntries
    .map((entry) => ({
      ...entry,
      changes:
        selectedCategory === "all"
          ? entry.changes
          : entry.changes.filter(
              (change) => change.category === selectedCategory
            ),
    }))
    .filter((entry) => entry.changes.length > 0);

  return (
    <div className="relative min-h-screen bg-background text-foreground">
      <nav className="-translate-y-1/2 fixed top-1/2 left-6 z-10 hidden lg:block">
        <div className="flex flex-col gap-2">
          {filteredEntries.map((entry, index) => (
            <button
              aria-label={`Navigate to version ${entry.version}`}
              className={`h-6 w-1.5 rounded-full transition-all duration-500 ${
                activeSection === `v${entry.version}`
                  ? "bg-foreground"
                  : "bg-muted-foreground/30 hover:bg-muted-foreground/60"
              }`}
              key={entry.version}
              onClick={() =>
                document
                  .getElementById(`v${entry.version}`)
                  ?.scrollIntoView({ behavior: "smooth" })
              }
            />
          ))}
        </div>
      </nav>

      <main className="mx-auto max-w-3xl px-6 sm:px-8">
        <header
          className="flex min-h-[70vh] items-center"
          id="intro"
          ref={(el) => {
            sectionsRef.current[0] = el;
          }}
        >
          <div className="w-full space-y-8">
            <div className="space-y-4">
              <div className="space-y-2">
                <div className="font-mono text-muted-foreground text-xs tracking-wider">
                  CHANGELOG / 2025
                </div>
                <h1 className="font-light text-4xl tracking-tight sm:text-5xl lg:text-6xl">
                  Agentic
                  <br />
                  <span className="text-muted-foreground">AI</span>
                </h1>
              </div>

              <div className="max-w-xl space-y-4">
                <p className="text-base text-muted-foreground leading-relaxed sm:text-lg">
                  Building the future of
                  <span className="text-foreground"> autonomous agents</span>.
                  Track our latest
                  <span className="text-foreground"> features</span>,
                  <span className="text-foreground"> improvements</span>, and
                  <span className="text-foreground"> fixes</span>.
                </p>

                <div className="flex flex-col gap-2 text-muted-foreground text-xs sm:flex-row sm:items-center">
                  <div className="flex items-center gap-2">
                    <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-chart-2" />
                    All systems operational
                  </div>
                  <div>Last updated: Jan 15, 2025</div>
                </div>
              </div>
            </div>

            <div className="space-y-3">
              <div className="font-mono text-muted-foreground text-xs">
                FILTER BY
              </div>
              <div className="flex flex-wrap gap-2">
                {categories.map((cat) => (
                  <button
                    className={`rounded-lg px-3 py-1.5 text-xs shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)] transition-all duration-300 ${
                      selectedCategory === cat.id
                        ? "bg-foreground text-background"
                        : "bg-background text-foreground hover:bg-muted"
                    }`}
                    key={cat.id}
                    onClick={() => setSelectedCategory(cat.id)}
                  >
                    {cat.label}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </header>

        {filteredEntries.map((entry, entryIndex) => (
          <section
            className="py-12 sm:py-16"
            id={`v${entry.version}`}
            key={entry.version}
            ref={(el) => {
              sectionsRef.current[entryIndex + 1] = el;
            }}
          >
            <div className="space-y-6">
              <div className="flex flex-col gap-3 border-border border-b pb-4 sm:flex-row sm:items-end sm:justify-between">
                <div className="space-y-1">
                  <h2 className="font-light text-2xl sm:text-3xl">
                    Version {entry.version}
                  </h2>
                  <div className="font-mono text-muted-foreground text-xs">
                    {entry.date}
                  </div>
                </div>
                <div className="flex items-center gap-2 text-muted-foreground text-xs">
                  <span>{entry.changes.length} updates</span>
                </div>
              </div>

              <div className="space-y-3">
                {entry.changes.map((change, changeIndex) => {
                  const changeId = `${entry.version}-${changeIndex}`;
                  const isExpanded = expandedChanges.has(changeId);

                  return (
                    <article
                      className="group rounded-lg border border-border shadow-[0px_1px_1px_0px_hsla(0,_0%,_0%,_0.02)_inset,_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)] transition-all duration-300 hover:border-muted-foreground/50 hover:shadow-md"
                      key={changeIndex}
                    >
                      <button
                        className="w-full p-4 text-left sm:p-5"
                        onClick={() => toggleChange(changeId)}
                      >
                        <div className="flex items-start justify-between gap-4">
                          <div className="flex-1 space-y-1.5">
                            <div className="flex items-center gap-2">
                              <span
                                className={`rounded px-1.5 py-0.5 font-mono text-[10px] ${getCategoryColor(change.category)} bg-muted`}
                              >
                                {getCategoryLabel(change.category)}
                              </span>
                            </div>
                            <h3 className="font-medium text-base transition-colors duration-300 group-hover:text-muted-foreground sm:text-lg">
                              {change.title}
                            </h3>
                          </div>
                          <svg
                            className={`h-5 w-5 flex-shrink-0 text-muted-foreground transition-transform duration-300 ${
                              isExpanded ? "rotate-180" : ""
                            }`}
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M19 9l-7 7-7-7"
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              strokeWidth={2}
                            />
                          </svg>
                        </div>
                      </button>

                      <div
                        className={`overflow-hidden transition-all duration-500 ${
                          isExpanded
                            ? "max-h-96 opacity-100"
                            : "max-h-0 opacity-0"
                        }`}
                      >
                        <div className="px-4 pt-0 pb-4 sm:px-5 sm:pb-5">
                          <p className="text-muted-foreground text-sm leading-relaxed">
                            {change.description}
                          </p>
                        </div>
                      </div>
                    </article>
                  );
                })}
              </div>
            </div>
          </section>
        ))}

        <footer className="border-border border-t py-12 sm:py-16">
          <div className="space-y-8">
            <div className="grid gap-8 lg:grid-cols-2">
              <div className="space-y-4">
                <h2 className="font-light text-xl sm:text-2xl">Stay Updated</h2>

                <div className="space-y-4">
                  <p className="text-muted-foreground text-sm leading-relaxed">
                    Subscribe to get notified about new features, improvements,
                    and important updates.
                  </p>

                  <div className="flex gap-2">
                    <input
                      className="flex-1 rounded-lg border border-border bg-background px-3 py-2 text-foreground text-sm shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)] placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
                      placeholder="your@email.com"
                      type="email"
                    />
                    <button className="rounded-lg bg-foreground px-4 py-2 text-background text-sm shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)] transition-opacity duration-300 hover:opacity-90">
                      Subscribe
                    </button>
                  </div>
                </div>
              </div>

              <div className="space-y-4">
                <div className="font-mono text-muted-foreground text-xs">
                  RESOURCES
                </div>

                <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
                  {[
                    { name: "Documentation", url: "#" },
                    { name: "API Reference", url: "#" },
                    { name: "Status Page", url: "#" },
                    { name: "GitHub", url: "#" },
                  ].map((link) => (
                    <a
                      className="group rounded-lg border border-border p-3 shadow-[0px_1px_1px_0px_hsla(0,_0%,_0%,_0.02)_inset,_0px_0px_0px_1px_hsla(0,_0%,_0%,_0.02)_inset,_0px_0px_0px_1px_rgba(255,_255,_255,_0.25)] transition-all duration-300 hover:border-muted-foreground/50 hover:shadow-sm"
                      href={link.url}
                      key={link.name}
                    >
                      <div className="flex items-center justify-between">
                        <div className="text-foreground text-sm transition-colors duration-300 group-hover:text-muted-foreground">
                          {link.name}
                        </div>
                        <svg
                          className="h-3.5 w-3.5 transform text-muted-foreground transition-transform duration-300 group-hover:translate-x-1"
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M17 8l4 4m0 0l-4 4m4-4H3"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                          />
                        </svg>
                      </div>
                    </a>
                  ))}
                </div>
              </div>
            </div>

            <div className="flex flex-col items-start justify-between gap-4 border-border border-t pt-6 lg:flex-row lg:items-center">
              <div className="space-y-1">
                <div className="text-muted-foreground text-xs">
                  © 2025 Agentic AI. All rights reserved.
                </div>
                <div className="text-[10px] text-muted-foreground">
                  Built by aisdkagents.com
                </div>
              </div>
            </div>
          </div>
        </footer>
      </main>

      <div className="pointer-events-none fixed right-0 bottom-0 left-0 h-16 bg-gradient-to-t from-background via-background/80 to-transparent" />
    </div>
  );
}
marketing-changelog-1

marketing-changelog-1

marketing-changelog-1

marketing-changelog-1
