@aws505/sheetsite 1.0.1 → 1.0.3

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
@@ -18,6 +20,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/theme/colors.ts
@@ -3893,10 +3903,10 @@ function Icon({ name, ...props }) {
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var defaultNavigation = [
   { label: "Home", href: "/" },
-  { label: "Services", href: "/services" },
-  { label: "Gallery", href: "/gallery" },
-  { label: "About", href: "/about" },
-  { label: "Contact", href: "/contact" }
+  { label: "Services", href: "/#services" },
+  { label: "Hours", href: "/#hours" },
+  { label: "Reviews", href: "/#reviews" },
+  { label: "FAQ", href: "/#faq" }
 ];
 function Header({
   business,
@@ -3989,10 +3999,10 @@ function Header({
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var defaultQuickLinks = [
   { label: "Home", href: "/" },
-  { label: "Services", href: "/services" },
-  { label: "About", href: "/about" },
-  { label: "Contact", href: "/contact" },
-  { label: "Privacy Policy", href: "/privacy" }
+  { label: "Services", href: "/#services" },
+  { label: "Hours", href: "/#hours" },
+  { label: "Reviews", href: "/#reviews" },
+  { label: "FAQ", href: "/#faq" }
 ];
 var dayNames = {
   monday: "Mon",
@@ -4306,7 +4316,8 @@ function Services({
   showIcons = true,
   variant = "cards",
   limit,
-  className = ""
+  className = "",
+  id = "services"
 }) {
   const displayedServices = limit ? services.slice(0, limit) : services;
   const gridCols = {
@@ -4315,7 +4326,7 @@ function Services({
     4: "md:grid-cols-2 lg:grid-cols-4"
   };
   if (variant === "list") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { className: `py-16 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "container mx-auto px-4", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { id, className: `py-16 scroll-mt-20 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "container mx-auto px-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SectionHeader, { title, subtitle }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "max-w-3xl mx-auto divide-y divide-gray-200", children: displayedServices.map((service) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         ServiceListItem,
@@ -4329,7 +4340,7 @@ function Services({
     ] }) });
   }
   if (variant === "minimal") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { className: `py-16 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "container mx-auto px-4", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { id, className: `py-16 scroll-mt-20 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "container mx-auto px-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SectionHeader, { title, subtitle }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `grid gap-6 ${gridCols[columns]}`, children: displayedServices.map((service) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         ServiceMinimalCard,
@@ -4341,7 +4352,7 @@ function Services({
       )) })
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { className: `py-16 bg-gray-50 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "container mx-auto px-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("section", { id, className: `py-16 scroll-mt-20 bg-gray-50 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "container mx-auto px-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SectionHeader, { title, subtitle }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `grid gap-6 ${gridCols[columns]}`, children: displayedServices.map((service) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       ServiceCard,
@@ -4415,7 +4426,8 @@ function Testimonials({
   showRatings = true,
   variant = "cards",
   limit,
-  className = ""
+  className = "",
+  id = "reviews"
 }) {
   const displayedTestimonials = limit ? testimonials.slice(0, limit) : testimonials;
   const gridCols = {
@@ -4423,7 +4435,7 @@ function Testimonials({
     2: "md:grid-cols-2 max-w-4xl mx-auto",
     3: "md:grid-cols-2 lg:grid-cols-3"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("section", { className: `py-16 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "container mx-auto px-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("section", { id, className: `py-16 scroll-mt-20 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "container mx-auto px-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "text-center mb-12", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "text-3xl md:text-4xl font-bold text-gray-900 mb-4", children: title }),
       subtitle && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-lg text-gray-600 max-w-2xl mx-auto", children: subtitle })
@@ -4526,7 +4538,8 @@ function FAQ({
   variant = "accordion",
   defaultOpen = 0,
   allowMultiple = false,
-  className = ""
+  className = "",
+  id = "faq"
 }) {
   const initialOpen = Array.isArray(defaultOpen) ? defaultOpen : [defaultOpen];
   const [openItems, setOpenItems] = (0, import_react2.useState)(initialOpen);
@@ -4542,18 +4555,18 @@ function FAQ({
     }
   };
   if (variant === "cards") {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("section", { className: `py-16 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "container mx-auto px-4", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("section", { id, className: `py-16 scroll-mt-20 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "container mx-auto px-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SectionHeader2, { title, subtitle }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "grid md:grid-cols-2 gap-6 max-w-4xl mx-auto", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FAQCard, { item }, item.id || item.question)) })
     ] }) });
   }
   if (variant === "simple") {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("section", { className: `py-16 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "container mx-auto px-4", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("section", { id, className: `py-16 scroll-mt-20 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "container mx-auto px-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SectionHeader2, { title, subtitle }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "max-w-3xl mx-auto space-y-8", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FAQSimple, { item }, item.id || item.question)) })
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("section", { className: `py-16 bg-gray-50 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "container mx-auto px-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("section", { id, className: `py-16 scroll-mt-20 bg-gray-50 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "container mx-auto px-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SectionHeader2, { title, subtitle }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "max-w-3xl mx-auto", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       FAQAccordionItem,
@@ -4650,14 +4663,15 @@ function Hours({
   highlightToday = true,
   variant = "card",
   timezone,
-  className = ""
+  className = "",
+  id = "hours"
 }) {
   const todayDay = getTodayDay(timezone);
   const sortedHours = [...hours].sort(
     (a, b) => dayOrder.indexOf(a.day) - dayOrder.indexOf(b.day)
   );
   if (variant === "inline") {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `flex flex-wrap gap-4 ${className}`, children: sortedHours.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { id, className: `flex flex-wrap gap-4 ${className}`, children: sortedHours.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       HoursInlineItem,
       {
         entry,
@@ -4667,7 +4681,7 @@ function Hours({
     )) });
   }
   if (variant === "minimal") {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `space-y-1 ${className}`, children: sortedHours.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { id, className: `space-y-1 ${className}`, children: sortedHours.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       HoursMinimalItem,
       {
         entry,
@@ -4676,7 +4690,7 @@ function Hours({
       entry.day
     )) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `bg-white rounded-lg shadow p-6 ${className}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { id, className: `bg-white rounded-lg shadow p-6 ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center mb-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ClockIcon, { size: 24, className: "text-primary-600 mr-2" }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "text-xl font-semibold text-gray-900", children: title })
@@ -4764,53 +4778,155 @@ function Gallery({
   columns = 3,
   variant = "grid",
   showCaptions = true,
+  enableLightbox = true,
   limit,
-  className = ""
+  className = "",
+  id = "gallery"
 }) {
   const displayedItems = limit ? items.slice(0, limit) : items;
   const [failedImages, setFailedImages] = (0, import_react3.useState)(/* @__PURE__ */ new Set());
-  const handleImageError = (id) => {
-    setFailedImages((prev) => new Set(prev).add(id));
+  const [lightboxIndex, setLightboxIndex] = (0, import_react3.useState)(null);
+  const handleImageError = (id2) => {
+    setFailedImages((prev) => new Set(prev).add(id2));
   };
   const gridCols = {
     2: "grid-cols-1 sm:grid-cols-2",
     3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
     4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("section", { className: `py-16 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "container mx-auto px-4", children: [
-    (title || subtitle) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-center mb-12", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "text-3xl md:text-4xl font-bold text-gray-900 mb-4", children: title }),
-      subtitle && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-lg text-gray-600 max-w-2xl mx-auto", children: subtitle })
+  const openLightbox = (index) => {
+    if (enableLightbox) {
+      setLightboxIndex(index);
+    }
+  };
+  const closeLightbox = () => setLightboxIndex(null);
+  const goToPrevious = () => {
+    if (lightboxIndex !== null) {
+      setLightboxIndex(lightboxIndex === 0 ? displayedItems.length - 1 : lightboxIndex - 1);
+    }
+  };
+  const goToNext = () => {
+    if (lightboxIndex !== null) {
+      setLightboxIndex(lightboxIndex === displayedItems.length - 1 ? 0 : lightboxIndex + 1);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { id, className: `py-16 scroll-mt-20 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "container mx-auto px-4", children: [
+      (title || subtitle) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-center mb-12", children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "text-3xl md:text-4xl font-bold text-gray-900 mb-4", children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-lg text-gray-600 max-w-2xl mx-auto", children: subtitle })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `grid gap-4 ${gridCols[columns]}`, children: displayedItems.map((item, index) => {
+        const itemId = item.id || item.imageUrl;
+        const hasFailed = failedImages.has(itemId);
+        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "div",
+          {
+            className: `group relative aspect-square overflow-hidden rounded-lg bg-gray-100 ${enableLightbox ? "cursor-pointer" : ""}`,
+            onClick: () => openLightbox(index),
+            role: enableLightbox ? "button" : void 0,
+            tabIndex: enableLightbox ? 0 : void 0,
+            onKeyDown: enableLightbox ? (e) => e.key === "Enter" && openLightbox(index) : void 0,
+            children: hasFailed ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute inset-0 flex items-center justify-center text-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Image unavailable" }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "img",
+                {
+                  src: item.imageUrl,
+                  alt: item.alt || "",
+                  loading: "lazy",
+                  className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105",
+                  onError: () => handleImageError(itemId)
+                }
+              ),
+              enableLightbox && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: "w-10 h-10 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" }) }) }),
+              showCaptions && item.caption && !enableLightbox && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute bottom-0 left-0 right-0 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-white text-sm", children: item.caption }) }) })
+            ] })
+          },
+          itemId
+        );
+      }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `grid gap-4 ${gridCols[columns]}`, children: displayedItems.map((item) => {
-      const itemId = item.id || item.imageUrl;
-      const hasFailed = failedImages.has(itemId);
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        "div",
-        {
-          className: "group relative aspect-square overflow-hidden rounded-lg bg-gray-100",
-          children: hasFailed ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute inset-0 flex items-center justify-center text-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Image unavailable" }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              "img",
-              {
-                src: item.imageUrl,
-                alt: item.alt || "",
-                loading: "lazy",
-                className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105",
-                onError: () => handleImageError(itemId)
-              }
-            ),
-            showCaptions && item.caption && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute bottom-0 left-0 right-0 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-white text-sm", children: item.caption }) }) })
+    enableLightbox && lightboxIndex !== null && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "div",
+      {
+        className: "fixed inset-0 z-50 bg-black/90 flex items-center justify-center",
+        onClick: closeLightbox,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              onClick: closeLightbox,
+              className: "absolute top-4 right-4 text-white hover:text-gray-300 transition-colors z-10",
+              "aria-label": "Close lightbox",
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: "w-8 h-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                goToPrevious();
+              },
+              className: "absolute left-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300 transition-colors z-10",
+              "aria-label": "Previous image",
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: "w-10 h-10", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                goToNext();
+              },
+              className: "absolute right-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300 transition-colors z-10",
+              "aria-label": "Next image",
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: "w-10 h-10", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            "div",
+            {
+              className: "max-w-5xl max-h-[85vh] mx-4",
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "img",
+                  {
+                    src: displayedItems[lightboxIndex].imageUrl,
+                    alt: displayedItems[lightboxIndex].alt || "",
+                    className: "max-w-full max-h-[85vh] object-contain"
+                  }
+                ),
+                showCaptions && displayedItems[lightboxIndex].caption && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-white text-center mt-4 text-lg", children: displayedItems[lightboxIndex].caption })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 text-white text-sm", children: [
+            lightboxIndex + 1,
+            " / ",
+            displayedItems.length
           ] })
-        },
-        itemId
-      );
-    }) })
-  ] }) });
+        ]
+      }
+    )
+  ] });
 }
 
-// src/components/ui/Button.tsx
+// src/components/sections/Menu.tsx
+var import_react4 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
+
+// src/components/sections/TrustBadges.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+
+// src/components/sections/BeforeAfter.tsx
+var import_react5 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+
+// src/components/ui/Button.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function getButtonClasses(props) {
   const { variant = "primary", size = "md", fullWidth, disabled } = props;
   const baseClasses = [
@@ -4852,16 +4968,16 @@ function Button({
   ...props
 }) {
   const classes = getButtonClasses({ variant, size, fullWidth, disabled: disabled || loading });
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "button",
     {
       className: `${classes} ${className}`,
       disabled: disabled || loading,
       ...props,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LoadingSpinner, { size }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "mr-2", children: leftIcon }),
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LoadingSpinner, { size }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "mr-2", children: leftIcon }),
         children,
-        rightIcon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ml-2", children: rightIcon })
+        rightIcon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ml-2", children: rightIcon })
       ] })
     }
   );
@@ -4872,7 +4988,7 @@ function LoadingSpinner({ size }) {
     md: "w-5 h-5",
     lg: "w-6 h-6"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "svg",
     {
       className: `animate-spin ${sizeClasses[size || "md"]}`,
@@ -4880,7 +4996,7 @@ function LoadingSpinner({ size }) {
       fill: "none",
       viewBox: "0 0 24 24",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "circle",
           {
             className: "opacity-25",
@@ -4891,7 +5007,7 @@ function LoadingSpinner({ size }) {
             strokeWidth: "4"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "path",
           {
             className: "opacity-75",
@@ -4914,15 +5030,15 @@ function ButtonLink({
   ...props
 }) {
   const classes = getButtonClasses({ variant, size, fullWidth, disabled: false });
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("a", { className: `${classes} ${className}`, ...props, children: [
-    leftIcon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "mr-2", children: leftIcon }),
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("a", { className: `${classes} ${className}`, ...props, children: [
+    leftIcon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "mr-2", children: leftIcon }),
     children,
-    rightIcon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ml-2", children: rightIcon })
+    rightIcon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ml-2", children: rightIcon })
   ] });
 }
 
 // src/components/ui/Card.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function getCardClasses(props) {
   const { variant = "default", padding = "md", hover = false } = props;
   const baseClasses = ["rounded-lg", "overflow-hidden"];
@@ -4955,7 +5071,7 @@ function Card({
   ...props
 }) {
   const classes = getCardClasses({ variant, padding, hover });
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `${classes} ${className}`, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `${classes} ${className}`, ...props, children });
 }
 function CardHeader({
   title,
@@ -4965,13 +5081,13 @@ function CardHeader({
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `flex items-start justify-between ${className}`, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "text-lg font-semibold text-gray-900", children: title }),
-      subtitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-1 text-sm text-gray-500", children: subtitle }),
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `flex items-start justify-between ${className}`, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-lg font-semibold text-gray-900", children: title }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mt-1 text-sm text-gray-500", children: subtitle }),
       children
     ] }),
-    action && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex-shrink-0 ml-4", children: action })
+    action && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex-shrink-0 ml-4", children: action })
   ] });
 }
 function CardBody({
@@ -4979,14 +5095,14 @@ function CardBody({
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `mt-4 ${className}`, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `mt-4 ${className}`, ...props, children });
 }
 function CardFooter({
   children,
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `mt-4 pt-4 border-t border-gray-100 ${className}`, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `mt-4 pt-4 border-t border-gray-100 ${className}`, ...props, children });
 }
 function CardImage({
   aspectRatio = "video",
@@ -5000,7 +5116,7 @@ function CardImage({
     wide: "aspect-[2/1]",
     auto: ""
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `-m-5 mb-4 ${aspectClasses[aspectRatio]} overflow-hidden`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `-m-5 mb-4 ${aspectClasses[aspectRatio]} overflow-hidden`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "img",
     {
       className: `w-full h-full object-cover ${className}`,
@@ -5010,6 +5126,10 @@ function CardImage({
   ) });
 }
 
+// src/components/ui/AnimatedSection.tsx
+var import_react6 = __toESM(require("react"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
+
 // src/seo/index.ts
 function generateMetadata(business, pageTitle, pageDescription, options = {}) {
   const { titleTemplate = "%s", baseUrl } = options;