app.js

import React, { useEffect, useState } from "react";
import { createRoot } from "react-dom/client";
import { blogPosts, projects } from "./content/config.js";

const h = React.createElement;
const productionData = {
  title: "Launch faster with a calm command center",
  cards: [
    { label: "Active Projects", value: "18", detail: "+4 this week" },
    { label: "Team Focus", value: "92%", detail: "across key rituals" },
    { label: "Ship Window", value: "6 days", detail: "until next release" }
  ],
  features: [
    "Static content powered by modular JavaScript files",
    "Reusable React components without a build step",
    "Responsive layout for desktop and mobile"
  ]
};

const routes = [
  { path: "/about", label: "About" },
  { path: "/blogs", label: "Blogs" },
  { path: "/projects", label: "Projects" },
  { path: "/contact", label: "Contact" }
];

function Header({ currentPath, onNavigate }) {
  function link(path) {
    return (event) => {
      event.preventDefault();
      onNavigate(path);
    };
  }

  return h(
    "header",
    { className: "site-header" },
    h("a", { className: "brand", href: "#/", onClick: link("/") }, h("span", null, "LS"), "LITTLESPARK"),
    h(
      "nav",
      { "aria-label": "Primary" },
      routes.map((route) =>
        h(
          "a",
          {
            key: route.path,
            href: `#${route.path}`,
            className: currentPath === route.path ? "active" : "",
            onClick: link(route.path)
          },
          route.label
        )
      )
    )
  );
}

function Footer() {
  return h("footer", { className: "site-footer" }, "May 2026 / Developed using Codex");
}

function StatCard({ label, value, detail }) {
  return h(
    "article",
    { className: "stat-card" },
    h("p", null, label),
    h("strong", null, value),
    h("span", null, detail)
  );
}

function PreviewPanel() {
  const rows = ["Discovery sprint", "Billing redesign", "Mobile polish", "QA release"];

  return h(
    "section",
    { className: "preview-panel", id: "dashboard", "aria-label": "Dashboard preview" },
    h(
      "div",
      { className: "preview-toolbar" },
      h("span", { className: "dot red" }),
      h("span", { className: "dot yellow" }),
      h("span", { className: "dot green" }),
      h("button", { type: "button", "aria-label": "Refresh dashboard" }, "↻")
    ),
    h(
      "div",
      { className: "preview-grid" },
      h(
        "div",
        { className: "timeline" },
        rows.map((row, index) =>
          h(
            "div",
            { className: "timeline-row", key: row },
            h("span", null, row),
            h("div", { className: "bar", style: { "--fill": `${62 + index * 8}%` } })
          )
        )
      ),
      h(
        "div",
        { className: "signal" },
        h("span", null, "Release confidence"),
        h("strong", null, "87"),
        h("div", { className: "ring", "aria-hidden": "true" })
      )
    )
  );
}

function appLink(path, navigate) {
  return {
    href: `#${path}`,
    onClick: (event) => {
      event.preventDefault();
      navigate(path);
    }
  };
}

function HomePage({ data, navigate }) {
  const cards = data?.cards || [];
  const features = data?.features || [];

  return h(
    "main",
    null,
    h(
      "section",
      { className: "hero" },
      h(
        "div",
        { className: "hero-copy" },
        h("p", { className: "eyebrow" }, "React frontend / Node backend"),
        h("h1", null, data?.title || "Loading your workspace..."),
        h(
          "p",
          { className: "lede" },
          "A responsive multipage webpage powered by a small Node.js API and a React interface, shaped for littleSpark."
        ),
        h(
          "div",
          { className: "actions" },
          h("a", { className: "primary-action", ...appLink("/projects", navigate) }, "View projects"),
          h("a", { className: "secondary-action", ...appLink("/about", navigate) }, "About littleSpark")
        )
      ),
      h(PreviewPanel)
    ),
    h(
      "section",
      { className: "stats-band", "aria-label": "Key metrics" },
      cards.map((card) => h(StatCard, { ...card, key: card.label }))
    ),
    h(
      "section",
      { className: "feature-section" },
      h("div", null, h("p", { className: "eyebrow" }, "Built to extend"), h("h2", null, "A clean base for your next idea")),
      h(
        "div",
        { className: "feature-list" },
        features.map((feature) => h("article", { key: feature }, h("span", null, "/"), h("p", null, feature)))
      )
    )
  );
}

function PageHero({ eyebrow, title, copy }) {
  return h(
    "section",
    { className: "page-hero" },
    h("p", { className: "eyebrow" }, eyebrow),
    h("h1", null, title),
    h("p", { className: "lede" }, copy)
  );
}

function AboutPage() {
  return h(
    "main",
    null,
    h(PageHero, {
      eyebrow: "About",
      title: "Small sparks, carefully made.",
      copy: "littleSpark is a compact studio-style space for turning early ideas into useful, polished digital moments."
    }),
    h(
      "section",
      { className: "content-grid" },
      ["Quiet design systems", "Fast web prototypes", "Launch-ready interfaces"].map((item) =>
        h("article", { className: "info-card", key: item }, h("span", null, "01"), h("h2", null, item), h("p", null, "Focused, minimal, and built around clear user action."))
      )
    )
  );
}

function BlogsPage({ navigate }) {
  return h(
    "main",
    null,
    h(PageHero, {
      eyebrow: "Blogs",
      title: "Notes from the workshop.",
      copy: "Short static posts for process, design decisions, and experiments behind littleSpark."
    }),
    h(
      "section",
      { className: "stack-list" },
      blogPosts.map((post, index) =>
        h(
          "a",
          { className: "list-card linked-card", key: post.slug, ...appLink(`/blogs/${post.slug}`, navigate) },
          h("span", null, `0${index + 1}`),
          h("div", null, h("h2", null, post.title), h("p", null, post.summary))
        )
      )
    )
  );
}

function BlogDetailPage({ post, navigate }) {
  return h(
    "main",
    null,
    h(PageHero, {
      eyebrow: "Blog",
      title: post.title,
      copy: post.summary
    }),
    h(
      "article",
      { className: "blog-template" },
      h(
        "section",
        { className: "blog-project-name" },
        h("p", { className: "eyebrow" }, "Project name"),
        h("h2", null, post.projectName)
      ),
      h("div", { className: "abstract-image image-one", role: "img", "aria-label": post.imageLabel }, h("span", null, post.imageLabel)),
      h(
        "section",
        { className: "blog-copy-block" },
        h("p", { className: "eyebrow" }, "Description"),
        post.body.map((paragraph) => h("p", { key: paragraph }, paragraph))
      ),
      h("div", { className: "abstract-image image-two", role: "img", "aria-label": post.secondImageLabel }, h("span", null, post.secondImageLabel)),
      h(
        "section",
        { className: "blog-copy-block" },
        h("p", { className: "eyebrow" }, "More content"),
        post.secondBody.map((paragraph) => h("p", { key: paragraph }, paragraph))
      ),
      h(
        "section",
        { className: "reference-list" },
        h("p", { className: "eyebrow" }, "References"),
        h(
          "ul",
          null,
          post.references.map((reference) => h("li", { key: reference }, reference))
        )
      ),
      h("a", { className: "secondary-action", ...appLink("/blogs", navigate) }, "Back to blogs")
    )
  );
}

function ProjectsPage({ navigate }) {
  return h(
    "main",
    null,
    h(PageHero, {
      eyebrow: "Projects",
      title: "Selected builds and experiments.",
      copy: "A static project index for the kind of focused web work this starter can grow into."
    }),
    h(
      "section",
      { className: "content-grid" },
      projects.map((project, index) =>
        h(
          "a",
          { className: "info-card linked-card", key: project.slug, ...appLink(`/projects/${project.slug}`, navigate) },
          h("span", null, `0${index + 1}`),
          h("h2", null, project.title),
          h("p", null, project.summary)
        )
      )
    )
  );
}

function ProjectDetailPage({ project, navigate }) {
  return h(
    "main",
    null,
    h(PageHero, {
      eyebrow: "Project",
      title: project.title,
      copy: project.summary
    }),
    h(
      "section",
      { className: "detail-panel" },
      h("h2", null, "Included pieces"),
      h(
        "div",
        { className: "feature-list" },
        project.details.map((detail) => h("article", { key: detail }, h("span", null, "/"), h("p", null, detail)))
      ),
      h("a", { className: "secondary-action", ...appLink("/projects", navigate) }, "Back to projects")
    )
  );
}

function ContactPage() {
  return h(
    "main",
    null,
    h(PageHero, {
      eyebrow: "Contact",
      title: "Start with a small spark.",
      copy: "Use this page for email, social links, inquiry forms, or anything else you want visitors to do next."
    }),
    h(
      "section",
      { className: "contact-panel" },
      h("h2", null, "hello@littlespark.dev"),
      h("p", null, "Available for compact web builds, interface polish, and prototype-to-page work."),
      h("a", { className: "primary-action", href: "mailto:hello@littlespark.dev" }, "Send email")
    )
  );
}

function NotFoundPage() {
  return h(
    "main",
    null,
    h(PageHero, {
      eyebrow: "404",
      title: "That page is not lit yet.",
      copy: "Use the navigation above to jump back into the littleSpark pages."
    })
  );
}

function App() {
  const [data] = useState(productionData);
  const [currentPath, setCurrentPath] = useState(getHashPath());

  function getHashPath() {
    const path = window.location.hash.replace(/^#/, "");
    return path.startsWith("/") ? path : "/";
  }

  useEffect(() => {
    if (!window.location.hash) {
      window.history.replaceState({}, "", "#/");
    }

    const handleHashChange = () => setCurrentPath(getHashPath());
    window.addEventListener("hashchange", handleHashChange);
    return () => window.removeEventListener("hashchange", handleHashChange);
  }, []);

  useEffect(() => {
    window.scrollTo({ top: 0, left: 0, behavior: "auto" });
  }, [currentPath]);

  function navigate(path) {
    if (path !== currentPath) {
      window.location.hash = path;
      setCurrentPath(path);
    }
  }

  const blogSlug = currentPath.startsWith("/blogs/") ? currentPath.replace("/blogs/", "") : "";
  const projectSlug = currentPath.startsWith("/projects/") ? currentPath.replace("/projects/", "") : "";
  const activeBlog = blogPosts.find((post) => post.slug === blogSlug);
  const activeProject = projects.find((project) => project.slug === projectSlug);

  const page =
    currentPath === "/"
      ? h(HomePage, { data, navigate })
      : currentPath === "/about"
        ? h(AboutPage)
        : currentPath === "/blogs"
          ? h(BlogsPage, { navigate })
          : activeBlog
            ? h(BlogDetailPage, { post: activeBlog, navigate })
            : currentPath === "/projects"
              ? h(ProjectsPage, { navigate })
              : activeProject
                ? h(ProjectDetailPage, { project: activeProject, navigate })
                : currentPath === "/contact"
                  ? h(ContactPage)
                  : h(NotFoundPage);

  return h(
    React.Fragment,
    null,
    h(Header, { currentPath, onNavigate: navigate }),
    page,
    h(Footer)
  );
}

createRoot(document.getElementById("root")).render(h(App));