styled-hairomin 0.2.7 → 0.3.1

package/dist/index.cjs.js

@@ -0,0 +1,2213 @@
+"use client";
+'use strict';
+
+var styled = require('styled-components');
+var fa = require('react-icons/fa');
+var jsxRuntime = require('react/jsx-runtime');
+var Link = require('next/link');
+
+const variantStyles$4 = {
+  elevated: {
+    background: "#fff"},
+  bordered: {
+    background: "#f8f9fa"},
+  gradient: {
+    background: "linear-gradient(135deg, #0066cc 0%, #004080 100%)"}
+};
+const ElevatedCard = styled.div`
+  width: 100%;
+  max-width: 350px;
+  background: ${variantStyles$4.elevated.background};
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  transition: all 0.4s ease;
+  cursor: pointer;
+  
+  &:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
+  }
+
+  @media (max-width: 768px) {
+    max-width: 100%;
+  }
+`;
+const ElevatedImageWrapper = styled.div`
+  position: relative;
+  height: 220px;
+  overflow: hidden;
+`;
+const ElevatedImage = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.4s;
+  
+  ${ElevatedCard}:hover & {
+    transform: scale(1.1);
+  }
+`;
+const Badge = styled.div`
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  background: rgba(0, 102, 204, 0.95);
+  color: #fff;
+  padding: 0.5rem 1rem;
+  border-radius: 25px;
+  font-weight: 700;
+  font-size: 14px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+`;
+const ElevatedContent = styled.div`
+  padding: 1.5rem;
+`;
+const ElevatedTitle = styled.h3`
+  margin: 0 0 0.8rem;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #0066cc;
+`;
+const ElevatedFeatures = styled.div`
+  display: flex;
+  gap: 1.2rem;
+  margin: 1rem 0;
+  color: #7f8c8d;
+  font-size: 14px;
+`;
+const Feature = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+`;
+const ElevatedFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1.2rem;
+  padding-top: 1rem;
+  border-top: 1px solid #ecf0f1;
+`;
+const Price = styled.div`
+  font-size: 1.6rem;
+  font-weight: 800;
+  color: #0066cc;
+  
+  span {
+    font-size: 0.9rem;
+    font-weight: 400;
+    color: #95a5a6;
+  }
+
+  @media (max-width: 768px) {
+    font-size: 1.3rem;
+
+    span {
+      font-size: 0.8rem;
+    }
+  }
+`;
+const Rating = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  color: #f39c12;
+  font-weight: 600;
+`;
+
+/* ====== VARIANT BORDERED: Card dengan outline dan ikon ====== */
+const BorderedCard = styled.div`
+  width: 100%;
+  max-width: 380px;
+  background: ${variantStyles$4.bordered.background};
+  border: 3px solid #dee2e6;
+  border-radius: 16px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  
+  &:hover {
+    border-color: #6c757d;
+    box-shadow: 0 8px 24px rgba(108, 117, 125, 0.2);
+  }
+
+  @media (max-width: 768px) {
+    max-width: 100%;
+  }
+`;
+const BorderedContent = styled.div`
+  padding: 1.8rem;
+`;
+const BorderedHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  margin-bottom: 1rem;
+`;
+const BorderedTitle = styled.h3`
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: #0066cc;
+`;
+const BorderedLocation = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: #6c757d;
+  font-size: 14px;
+  margin: 0.5rem 0 1rem;
+`;
+const BorderedImage = styled.img`
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 12px;
+  margin: 1rem 0;
+`;
+const BorderedDescription = styled.p`
+  color: #495057;
+  font-size: 14px;
+  line-height: 1.6;
+  margin: 1rem 0;
+`;
+const BorderedFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 2px solid #dee2e6;
+  flex-wrap: wrap;
+  gap: 1rem;
+
+  @media (max-width: 480px) {
+    flex-direction: column;
+    align-items: stretch;
+    text-align: center;
+  }
+`;
+const BorderedPrice = styled.div`
+  font-size: 1.8rem;
+  font-weight: 800;
+  color: #0066cc;
+
+  @media (max-width: 768px) {
+    font-size: 1.5rem;
+  }
+`;
+const BookButton = styled.button`
+  background: #0066cc;
+  color: white;
+  border: none;
+  padding: 0.7rem 1.5rem;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  
+  &:hover {
+    background: #0052a3;
+    transform: scale(1.05);
+  }
+`;
+
+/* ====== VARIANT GRADIENT: Card gradien berwarna ====== */
+const GradientCard = styled.div`
+  width: 100%;
+  max-width: 320px;
+  background: ${variantStyles$4.gradient.background};
+  border-radius: 24px;
+  overflow: visible;
+  position: relative;
+  box-shadow: 0 15px 45px rgba(245, 87, 108, 0.4);
+  transition: all 0.4s ease;
+  cursor: pointer;
+  
+  &:hover {
+    transform: scale(1.05) rotate(2deg);
+  }
+
+  @media (max-width: 768px) {
+    max-width: 100%;
+    
+    &:hover {
+      transform: none;
+    }
+  }
+`;
+const GradientImageWrapper = styled.div`
+  padding: 1.5rem 1.5rem 0;
+`;
+const GradientImage = styled.img`
+  width: 100%;
+  height: 240px;
+  object-fit: cover;
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+`;
+const GradientContent = styled.div`
+  padding: 1.5rem;
+  color: white;
+`;
+const GradientTitle = styled.h3`
+  margin: 0 0 0.5rem;
+  font-size: 1.6rem;
+  font-weight: 800;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+`;
+const GradientDescription = styled.p`
+  margin: 0.5rem 0 1rem;
+  opacity: 0.95;
+  font-size: 14px;
+  line-height: 1.5;
+`;
+const GradientFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const GradientPrice = styled.div`
+  font-size: 2rem;
+  font-weight: 900;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+
+  @media (max-width: 768px) {
+    font-size: 1.5rem;
+  }
+`;
+const GradientRating = styled.div`
+  background: rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(10px);
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+`;
+function CardVariant({
+  variant = "elevated",
+  data
+}) {
+  switch (variant) {
+    case "elevated":
+      return /*#__PURE__*/jsxRuntime.jsxs(ElevatedCard, {
+        children: [/*#__PURE__*/jsxRuntime.jsxs(ElevatedImageWrapper, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(ElevatedImage, {
+            src: data.image,
+            alt: data.title
+          }), /*#__PURE__*/jsxRuntime.jsx(Badge, {
+            children: data.badge
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs(ElevatedContent, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(ElevatedTitle, {
+            children: data.title
+          }), /*#__PURE__*/jsxRuntime.jsxs(ElevatedFeatures, {
+            children: [/*#__PURE__*/jsxRuntime.jsxs(Feature, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(fa.FaBed, {}), " Kasur Lembut"]
+            }), /*#__PURE__*/jsxRuntime.jsxs(Feature, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(fa.FaWifi, {}), " WiFi Gratis"]
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsxs(ElevatedFooter, {
+            children: [/*#__PURE__*/jsxRuntime.jsxs(Price, {
+              children: [data.price, /*#__PURE__*/jsxRuntime.jsx("span", {
+                children: "/malam"
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsxs(Rating, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(fa.FaStar, {}), " ", data.rating]
+            })]
+          })]
+        })]
+      });
+    case "bordered":
+      return /*#__PURE__*/jsxRuntime.jsx(BorderedCard, {
+        children: /*#__PURE__*/jsxRuntime.jsxs(BorderedContent, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(BorderedHeader, {
+            children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+              children: [/*#__PURE__*/jsxRuntime.jsx(BorderedTitle, {
+                children: data.title
+              }), /*#__PURE__*/jsxRuntime.jsxs(BorderedLocation, {
+                children: [/*#__PURE__*/jsxRuntime.jsx(fa.FaMapMarkerAlt, {}), " ", data.location]
+              })]
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(BorderedImage, {
+            src: data.image,
+            alt: data.title
+          }), /*#__PURE__*/jsxRuntime.jsx(BorderedDescription, {
+            children: data.description
+          }), /*#__PURE__*/jsxRuntime.jsxs(BorderedFooter, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(BorderedPrice, {
+              children: data.price
+            }), /*#__PURE__*/jsxRuntime.jsx(BookButton, {
+              children: "Pesan Sekarang"
+            })]
+          })]
+        })
+      });
+    case "gradient":
+      return /*#__PURE__*/jsxRuntime.jsxs(GradientCard, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(GradientImageWrapper, {
+          children: /*#__PURE__*/jsxRuntime.jsx(GradientImage, {
+            src: data.image,
+            alt: data.title
+          })
+        }), /*#__PURE__*/jsxRuntime.jsxs(GradientContent, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(GradientTitle, {
+            children: data.title
+          }), /*#__PURE__*/jsxRuntime.jsx(GradientDescription, {
+            children: data.description
+          }), /*#__PURE__*/jsxRuntime.jsxs(GradientFooter, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(GradientPrice, {
+              children: data.price
+            }), /*#__PURE__*/jsxRuntime.jsxs(GradientRating, {
+              children: ["\u2605 ", data.rating]
+            })]
+          })]
+        })]
+      });
+    default:
+      return null;
+  }
+}
+
+const variantStyles$3 = {
+  solid: {
+    background: "#0066cc",
+    color: "#fff",
+    hover: "#0052a3"
+  },
+  outline: {
+    background: "transparent",
+    color: "#0066cc",
+    border: "#0066cc",
+    hover: "#0066cc"
+  },
+  pill: {
+    background: "linear-gradient(135deg, #0066cc 0%, #004080 100%)",
+    color: "#fff"}
+};
+const SolidButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.8rem;
+  padding: 1rem 2.2rem;
+  font-size: 16px;
+  font-weight: 700;
+  border-radius: 12px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-family: "Poppins", sans-serif;
+  background: ${variantStyles$3.solid.background};
+  color: ${variantStyles$3.solid.color};
+  box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  
+  &:hover {
+    background: ${variantStyles$3.solid.hover};
+    transform: translateY(-3px);
+    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4);
+  }
+  
+  &:active {
+    transform: translateY(-1px);
+  }
+  
+  svg {
+    font-size: 18px;
+    transition: transform 0.3s;
+    flex-shrink: 0;
+  }
+  
+  &:hover svg {
+    transform: translateX(5px);
+  }
+
+  @media (max-width: 768px) {
+    padding: 0.8rem 1.5rem;
+    font-size: 13px;
+    gap: 0.5rem;
+    width: 100%;
+
+    svg {
+      font-size: 14px;
+    }
+  }
+`;
+
+/* ====== VARIANT OUTLINE: Tombol dengan border dan efek fill saat hover ====== */
+const OutlineButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6rem;
+  padding: 0.9rem 2rem;
+  font-size: 15px;
+  font-weight: 600;
+  border-radius: 8px;
+  border: 2px solid ${variantStyles$3.outline.border};
+  background: ${variantStyles$3.outline.background};
+  color: ${variantStyles$3.outline.color};
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-family: "Inter", sans-serif;
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: ${variantStyles$3.outline.hover};
+    transition: left 0.4s ease;
+    z-index: 0;
+  }
+  
+  &:hover::before {
+    left: 0;
+  }
+  
+  &:hover {
+    color: white;
+    border-color: ${variantStyles$3.outline.hover};
+  }
+  
+  span, svg {
+    position: relative;
+    z-index: 1;
+  }
+  
+  svg {
+    transition: transform 0.3s;
+    flex-shrink: 0;
+  }
+  
+  &:hover svg {
+    transform: scale(1.2);
+  }
+
+  @media (max-width: 768px) {
+    padding: 0.7rem 1.5rem;
+    font-size: 13px;
+    gap: 0.5rem;
+    width: 100%;
+  }
+`;
+
+/* ====== VARIANT PILL: Tombol bulat dengan gradien ====== */
+const PillButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.7rem;
+  padding: 1.1rem 2.5rem;
+  font-size: 15px;
+  font-weight: 700;
+  border-radius: 50px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  font-family: "Poppins", sans-serif;
+  background: ${variantStyles$3.pill.background};
+  color: ${variantStyles$3.pill.color};
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+  position: relative;
+  overflow: hidden;
+  
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.2);
+    transform: translate(-50%, -50%);
+    transition: width 0.6s, height 0.6s;
+  }
+  
+  &:hover::after {
+    width: 300px;
+    height: 300px;
+  }
+  
+  &:hover {
+    transform: scale(1.05);
+    box-shadow: 0 12px 35px rgba(0, 102, 204, 0.6);
+  }
+  
+  span, svg {
+    position: relative;
+    z-index: 1;
+  }
+  
+  svg {
+    animation: bounce 2s infinite;
+    flex-shrink: 0;
+  }
+  
+  @keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-5px); }
+  }
+
+  @media (max-width: 768px) {
+    padding: 0.9rem 2rem;
+    font-size: 13px;
+    gap: 0.5rem;
+    width: 100%;
+  }
+`;
+function ButtonVariant({
+  variant = "solid",
+  onClick,
+  data
+}) {
+  switch (variant) {
+    case "solid":
+      return /*#__PURE__*/jsxRuntime.jsxs(SolidButton, {
+        onClick: onClick,
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          children: data?.label || "Konfirmasi Pemesanan"
+        }), data?.icon || /*#__PURE__*/jsxRuntime.jsx(fa.FaChevronRight, {})]
+      });
+    case "outline":
+      return /*#__PURE__*/jsxRuntime.jsxs(OutlineButton, {
+        onClick: onClick,
+        children: [data?.icon || /*#__PURE__*/jsxRuntime.jsx(fa.FaCheck, {}), /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: data?.label || "Tambah ke Favorit"
+        })]
+      });
+    case "pill":
+      return /*#__PURE__*/jsxRuntime.jsxs(PillButton, {
+        onClick: onClick,
+        children: [data?.icon || /*#__PURE__*/jsxRuntime.jsx(fa.FaDownload, {}), /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: data?.label || "Unduh"
+        })]
+      });
+    default:
+      return null;
+  }
+}
+
+const variantStyles$2 = {
+  modern: {
+    background: "linear-gradient(135deg, #0066cc 0%, #003d99 100%)",
+    color: "#fff"
+  },
+  minimal: {
+    background: "#ffffff",
+    color: "#0066cc",
+    border: "1px solid #e1e8ed"
+  },
+  glassmorphism: {
+    background: "rgba(0, 102, 204, 0.15)",
+    color: "#fff"}
+};
+
+// ====== VARIANT MODERN: Elevated header with icons ======
+const ModernHeader = styled.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2.5rem;
+  background: ${variantStyles$2.modern.background};
+  color: ${variantStyles$2.modern.color};
+  box-shadow: 0 8px 32px rgba(0, 102, 204, 0.3);
+  border-radius: 20px;
+  margin-bottom: 1.5rem;
+  font-family: "Poppins", sans-serif;
+  max-width: 100%;
+  box-sizing: border-box;
+  
+  @media (max-width: 768px) {
+    flex-direction: row;
+    gap: 0.5rem;
+    padding: 0.6rem 0.8rem;
+    border-radius: 12px;
+  }
+`;
+const ModernLogo = styled.div`
+  font-size: 1.6rem;
+  font-weight: 800;
+  letter-spacing: -1px;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  
+  &::before {
+    content: "🏨";
+    font-size: 2rem;
+  }
+
+  @media (max-width: 768px) {
+    font-size: 1rem;
+    gap: 0.3rem;
+
+    &::before {
+      font-size: 1.2rem;
+    }
+  }
+`;
+const ModernNav = styled.nav`
+  display: flex;
+  gap: 2rem;
+  align-items: center;
+  
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+const ModernLink = styled.a`
+  color: inherit;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 15px;
+  position: relative;
+  transition: all 0.3s;
+  
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 0;
+    height: 3px;
+    background: white;
+    transition: width 0.3s;
+  }
+  
+  &:hover::after {
+    width: 100%;
+  }
+`;
+const IconButton = styled.button`
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  color: white;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: scale(1.1);
+  }
+
+  @media (max-width: 768px) {
+    width: 28px;
+    height: 28px;
+    
+    svg {
+      font-size: 11px;
+    }
+  }
+`;
+const IconGroup = styled.div`
+  display: flex;
+  gap: 0.8rem;
+
+  @media (max-width: 768px) {
+    gap: 0.3rem;
+  }
+`;
+
+// ====== VARIANT MINIMAL: Clean centered header ======
+const MinimalHeader = styled.header`
+  background: ${variantStyles$2.minimal.background};
+  color: ${variantStyles$2.minimal.color};
+  border: ${variantStyles$2.minimal.border};
+  padding: 1.5rem 2rem;
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+  margin-bottom: 1.5rem;
+  font-family: "Inter", sans-serif;
+  max-width: 100%;
+  box-sizing: border-box;
+  
+  @media (max-width: 768px) {
+    padding: 0.6rem 0.8rem;
+  }
+`;
+const MinimalContainer = styled.div`
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const MinimalLogo = styled.div`
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: #2c3e50;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  
+  @media (max-width: 768px) {
+    font-size: 0.9rem;
+    letter-spacing: 1px;
+  }
+`;
+const MinimalNav = styled.nav`
+  display: flex;
+  gap: 3rem;
+  
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+const MinimalLink = styled.a`
+  color: #7f8c8d;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  transition: color 0.3s;
+  
+  &:hover {
+    color: #2c3e50;
+  }
+`;
+const MinimalButton = styled.button`
+  background: #0066cc;
+  color: white;
+  border: none;
+  padding: 0.7rem 1.8rem;
+  border-radius: 25px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  font-size: 14px;
+  
+  &:hover {
+    background: #0052a3;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
+  }
+  
+  @media (max-width: 768px) {
+    padding: 0.4rem 0.8rem;
+    font-size: 10px;
+  }
+`;
+const MinimalMobileMenu = styled.button`
+  display: none;
+  background: #f0f4f8;
+  border: none;
+  color: #2c3e50;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  
+  &:hover {
+    background: #e2e8f0;
+  }
+  
+  @media (max-width: 768px) {
+    display: flex;
+  }
+`;
+const MinimalActions = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+`;
+
+// ====== VARIANT GLASSMORPHISM: Glass effect with backdrop blur ======
+const GlassHeader = styled.header`
+  background: ${variantStyles$2.glassmorphism.background};
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: ${variantStyles$2.glassmorphism.color};
+  padding: 1.2rem 2rem;
+  border-radius: 16px;
+  margin-bottom: 1.5rem;
+  font-family: "Poppins", sans-serif;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 100%;
+  box-sizing: border-box;
+  
+  @media (max-width: 768px) {
+    padding: 0.6rem 0.8rem;
+    border-radius: 12px;
+  }
+`;
+const GlassLogo = styled.div`
+  font-size: 1.5rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, #fff, #a8edea);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  
+  @media (max-width: 768px) {
+    font-size: 0.9rem;
+  }
+`;
+const GlassNav = styled.nav`
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+  
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+const GlassLink = styled.a`
+  color: rgba(255, 255, 255, 0.9);
+  text-decoration: none;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  transition: all 0.3s;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+`;
+const GlassSearch = styled.div`
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 25px;
+  padding: 0.5rem 1.2rem;
+  gap: 0.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  
+  input {
+    background: transparent;
+    border: none;
+    outline: none;
+    color: white;
+    font-size: 14px;
+    
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.6);
+    }
+  }
+  
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+const GlassMobileNav = styled.nav`
+  display: none;
+  
+  @media (max-width: 768px) {
+    display: flex;
+    gap: 0.3rem;
+    align-items: center;
+  }
+`;
+const GlassMobileLink = styled.a`
+  color: rgba(255, 255, 255, 0.9);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 9px;
+  padding: 0.25rem 0.4rem;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.1);
+  transition: all 0.3s;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+`;
+
+// Helper function to normalize links (support both string and { label, href } format)
+const normalizeLink$1 = link => {
+  if (typeof link === 'string') {
+    return {
+      label: link,
+      href: '#'
+    };
+  }
+  return {
+    label: link.label,
+    href: link.href || '#'
+  };
+};
+function HeaderVariant({
+  variant = "modern",
+  data
+}) {
+  const defaultData = {
+    modern: {
+      logo: "ResortHub",
+      links: ["Beranda", "Kamar", "Fasilitas", "Hubungi"]
+    },
+    minimal: {
+      logo: "RESORT",
+      links: ["Beranda", "Kamar", "Tentang", "Hubungi"],
+      buttonText: "Pesan Sekarang"
+    },
+    glassmorphism: {
+      logo: "✦ Resort Surgawi",
+      links: ["Beranda", "Jelajahi", "Layanan"],
+      searchPlaceholder: "Cari..."
+    }
+  };
+  const headerData = data || defaultData[variant];
+  switch (variant) {
+    case "modern":
+      return /*#__PURE__*/jsxRuntime.jsxs(ModernHeader, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(ModernLogo, {
+          children: headerData.logo
+        }), /*#__PURE__*/jsxRuntime.jsx(ModernNav, {
+          children: headerData.links.map((link, idx) => {
+            const {
+              label,
+              href
+            } = normalizeLink$1(link);
+            return /*#__PURE__*/jsxRuntime.jsx(ModernLink, {
+              href: href,
+              children: label
+            }, idx);
+          })
+        }), /*#__PURE__*/jsxRuntime.jsxs(IconGroup, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(IconButton, {
+            children: /*#__PURE__*/jsxRuntime.jsx(fa.FaSearch, {})
+          }), /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+            children: /*#__PURE__*/jsxRuntime.jsx(fa.FaBell, {})
+          }), /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+            children: /*#__PURE__*/jsxRuntime.jsx(fa.FaBars, {})
+          })]
+        })]
+      });
+    case "minimal":
+      return /*#__PURE__*/jsxRuntime.jsx(MinimalHeader, {
+        children: /*#__PURE__*/jsxRuntime.jsxs(MinimalContainer, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(MinimalLogo, {
+            children: headerData.logo
+          }), /*#__PURE__*/jsxRuntime.jsx(MinimalNav, {
+            children: headerData.links.map((link, idx) => {
+              const {
+                label,
+                href
+              } = normalizeLink$1(link);
+              return /*#__PURE__*/jsxRuntime.jsx(MinimalLink, {
+                href: href,
+                children: label
+              }, idx);
+            })
+          }), /*#__PURE__*/jsxRuntime.jsxs(MinimalActions, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(MinimalButton, {
+              children: headerData.buttonText
+            }), /*#__PURE__*/jsxRuntime.jsx(MinimalMobileMenu, {
+              children: /*#__PURE__*/jsxRuntime.jsx(fa.FaBars, {})
+            })]
+          })]
+        })
+      });
+    case "glassmorphism":
+      return /*#__PURE__*/jsxRuntime.jsxs(GlassHeader, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(GlassLogo, {
+          children: headerData.logo
+        }), /*#__PURE__*/jsxRuntime.jsxs(GlassNav, {
+          children: [headerData.links.map((link, idx) => {
+            const {
+              label,
+              href
+            } = normalizeLink$1(link);
+            return /*#__PURE__*/jsxRuntime.jsx(GlassLink, {
+              href: href,
+              children: label
+            }, idx);
+          }), /*#__PURE__*/jsxRuntime.jsxs(GlassSearch, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(fa.FaSearch, {
+              size: 14
+            }), /*#__PURE__*/jsxRuntime.jsx("input", {
+              type: "text",
+              placeholder: headerData.searchPlaceholder
+            })]
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx(GlassMobileNav, {
+          children: headerData.links.map((link, idx) => {
+            const {
+              label,
+              href
+            } = normalizeLink$1(link);
+            return /*#__PURE__*/jsxRuntime.jsx(GlassMobileLink, {
+              href: href,
+              children: label
+            }, idx);
+          })
+        })]
+      });
+    default:
+      return null;
+  }
+}
+
+const variantStyles$1 = {
+  stacked: {
+    background: "#0a2e5a",
+    color: "#ecf0f1"
+  },
+  columns: {
+    background: "linear-gradient(135deg, #0066cc 0%, #004080 100%)",
+    color: "#fff"
+  },
+  centered: {
+    background: "#0a2e5a",
+    color: "#eee"
+  }
+};
+
+/* ====== VARIANT STACKED: Vertical sections ====== */
+const StackedFooter = styled.footer`
+  background: ${variantStyles$1.stacked.background};
+  color: ${variantStyles$1.stacked.color};
+  padding: 3rem 2rem 1.5rem;
+  font-family: "Inter", sans-serif;
+  border-top: 4px solid #0066cc;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  
+  @media (max-width: 768px) {
+    padding: 1rem 0.5rem 0.8rem;
+  }
+`;
+const StackedSection = styled.div`
+  max-width: 1200px;
+  margin: 0 auto 2rem;
+  padding-bottom: 2rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  
+  @media (max-width: 768px) {
+    margin: 0 auto 1rem;
+    padding-bottom: 1rem;
+  }
+`;
+const StackedBrand = styled.div`
+  margin-bottom: 1.5rem;
+  
+  h2 {
+    font-size: 2rem;
+    font-weight: 800;
+    margin: 0 0 0.5rem;
+    color: #3498db;
+  }
+  
+  p {
+    margin: 0;
+    opacity: 0.8;
+    font-size: 14px;
+    max-width: 400px;
+  }
+
+  @media (max-width: 768px) {
+    text-align: center;
+    margin-bottom: 1rem;
+    
+    h2 {
+      font-size: 1.3rem;
+    }
+
+    p {
+      max-width: 100%;
+      font-size: 12px;
+    }
+  }
+`;
+const StackedLinks = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 2rem;
+  margin: 2rem 0;
+
+  @media (max-width: 576px) {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
+    margin: 1rem 0;
+    text-align: center;
+    justify-items: center;
+  }
+`;
+const LinkGroup = styled.div`
+  h4 {
+    font-size: 1rem;
+    font-weight: 700;
+    margin: 0 0 1rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+  
+  a {
+    display: block;
+    color: inherit;
+    text-decoration: none;
+    margin: 0.6rem 0;
+    opacity: 0.8;
+    font-size: 14px;
+    transition: all 0.3s;
+    
+    &:hover {
+      opacity: 1;
+      padding-left: 5px;
+      color: #3498db;
+    }
+  }
+  
+  @media (max-width: 576px) {
+    h4 {
+      font-size: 0.75rem;
+      margin: 0 0 0.5rem;
+    }
+    
+    a {
+      margin: 0.3rem 0;
+      font-size: 11px;
+    }
+  }
+`;
+const StackedBottom = styled.div`
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 1.5rem;
+  font-size: 13px;
+  opacity: 0.7;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    gap: 0.8rem;
+    text-align: center;
+    font-size: 10px;
+    padding-top: 1rem;
+  }
+`;
+const SocialIcons = styled.div`
+  display: flex;
+  gap: 1rem;
+  
+  a {
+    color: inherit;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    transition: all 0.3s;
+    
+    &:hover {
+      background: #3498db;
+      transform: translateY(-3px);
+    }
+  }
+  
+  @media (max-width: 576px) {
+    gap: 0.5rem;
+    
+    a {
+      width: 28px;
+      height: 28px;
+      font-size: 12px;
+    }
+  }
+`;
+
+/* ====== VARIANT COLUMNS: Multi-column layout ====== */
+const ColumnsFooter = styled.footer`
+  background: ${variantStyles$1.columns.background};
+  color: ${variantStyles$1.columns.color};
+  padding: 4rem 3rem 2rem;
+  font-family: "Poppins", sans-serif;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow-x: hidden;
+
+  @media (max-width: 768px) {
+    padding: 1rem 0.5rem 0.8rem;
+  }
+`;
+const ColumnsGrid = styled.div`
+  max-width: 1200px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: 3rem;
+  margin-bottom: 3rem;
+
+  @media (max-width: 968px) {
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+  }
+
+  @media (max-width: 576px) {
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+`;
+const ColumnBox = styled.div`
+  h3 {
+    font-size: 1.2rem;
+    font-weight: 700;
+    margin: 0 0 1.5rem;
+    position: relative;
+    padding-bottom: 0.8rem;
+    
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 50px;
+      height: 3px;
+      background: linear-gradient(90deg, #667eea, #764ba2);
+    }
+  }
+  
+  p {
+    margin: 0.8rem 0;
+    opacity: 0.85;
+    font-size: 14px;
+    line-height: 1.7;
+  }
+  
+  a {
+    display: block;
+    color: inherit;
+    text-decoration: none;
+    margin: 0.7rem 0;
+    opacity: 0.8;
+    font-size: 14px;
+    transition: all 0.3s;
+    
+    &:hover {
+      opacity: 1;
+      color: #667eea;
+      transform: translateX(5px);
+    }
+  }
+  
+  @media (max-width: 576px) {
+    h3 {
+      font-size: 0.9rem;
+      margin: 0 0 0.8rem;
+      padding-bottom: 0.5rem;
+      
+      &::after {
+        width: 30px;
+        height: 2px;
+      }
+    }
+    
+    p {
+      font-size: 11px;
+      margin: 0.4rem 0;
+      line-height: 1.5;
+    }
+    
+    a {
+      font-size: 11px;
+      margin: 0.4rem 0;
+    }
+  }
+`;
+const ContactItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  margin: 1rem 0;
+  font-size: 14px;
+  
+  svg {
+    color: #667eea;
+    font-size: 16px;
+  }
+`;
+const ColumnsDivider = styled.div`
+  max-width: 1200px;
+  margin: 0 auto;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding-top: 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13px;
+  opacity: 0.7;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
+  }
+`;
+
+/* ====== VARIANT CENTERED: Center-aligned footer ====== */
+const CenteredFooter = styled.footer`
+  background: ${variantStyles$1.centered.background};
+  color: ${variantStyles$1.centered.color};
+  padding: 3rem 2rem;
+  font-family: "Poppins", sans-serif;
+  text-align: center;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  
+  @media (max-width: 768px) {
+    padding: 1.5rem 0.5rem;
+  }
+`;
+const CenteredContent = styled.div`
+  max-width: 800px;
+  margin: 0 auto;
+`;
+const CenteredLogo = styled.div`
+  font-size: 2.5rem;
+  font-weight: 900;
+  margin-bottom: 1rem;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+`;
+const CenteredTagline = styled.p`
+  font-size: 16px;
+  opacity: 0.8;
+  margin: 1rem 0 2rem;
+  line-height: 1.6;
+`;
+const CenteredNav = styled.nav`
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  margin: 2rem 0;
+  flex-wrap: wrap;
+  
+  a {
+    color: inherit;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 15px;
+    transition: all 0.3s;
+    
+    &:hover {
+      color: #667eea;
+    }
+  }
+`;
+const CenteredSocial = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 1.5rem;
+  margin: 2.5rem 0;
+  
+  a {
+    color: inherit;
+    width: 45px;
+    height: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    transition: all 0.3s;
+    font-size: 18px;
+    
+    &:hover {
+      background: linear-gradient(135deg, #667eea, #764ba2);
+      border-color: transparent;
+      transform: scale(1.1);
+    }
+  }
+`;
+const CenteredCopyright = styled.div`
+  margin-top: 2rem;
+  padding-top: 2rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  font-size: 13px;
+  opacity: 0.6;
+`;
+
+// Helper function to normalize links (support both string and { label, href } format)
+const normalizeLink = link => {
+  if (typeof link === 'string') {
+    return {
+      label: link,
+      href: '#'
+    };
+  }
+  return {
+    label: link.label,
+    href: link.href || '#'
+  };
+};
+function FooterVariant({
+  variant = "stacked",
+  data
+}) {
+  const defaultData = {
+    stacked: {
+      brandName: "Paradise Resort",
+      brandDesc: "Rasakan kemewahan dan kenyamanan di jantung surga. Liburan impian Anda menanti.",
+      linkGroups: [{
+        title: "Tautan Cepat",
+        links: ["Beranda", "Kamar", "Fasilitas", "Galeri"]
+      }, {
+        title: "Layanan",
+        links: ["Spa & Wellness", "Restoran", "Bar Kolam", "Aktivitas"]
+      }, {
+        title: "Bantuan",
+        links: ["Hubungi Kami", "FAQ", "Kebijakan Privasi", "Syarat & Ketentuan"]
+      }],
+      copyright: "© 2025 Paradise Resort. Hak cipta dilindungi."
+    },
+    columns: {
+      aboutTitle: "Tentang Resort",
+      aboutDesc: "Resort tepi pantai premium yang menawarkan fasilitas kelas dunia, layanan luar biasa, dan pengalaman tak terlupakan untuk semua tamu.",
+      phone: "+62 (555) 123-4567",
+      email: "info@paradiseresort.com",
+      address: "Jl. Pantai No. 123, Pulau Tropis",
+      columns: [{
+        title: "Jelajahi",
+        links: ["Akomodasi", "Kuliner", "Acara", "Pernikahan", "Penawaran"]
+      }, {
+        title: "Kebijakan",
+        links: ["Kebijakan Pemesanan", "Pembatalan", "Privasi", "Syarat & Ketentuan", "Peta Situs"]
+      }, {
+        title: "Newsletter",
+        desc: "Berlangganan untuk penawaran eksklusif dan info terbaru"
+      }]
+    },
+    centered: {
+      logo: "✦ PARADISE ✦",
+      tagline: "Tempat kemewahan bertemu ketenangan. Temukan pelarian sempurna Anda di destinasi resort kelas dunia kami.",
+      links: ["Beranda", "Kamar", "Kuliner", "Spa", "Acara", "Kontak"],
+      copyright: "© 2025 Paradise Resort. Hak cipta dilindungi. | Kebijakan Privasi | Syarat Penggunaan"
+    }
+  };
+  const footerData = data || defaultData[variant];
+  switch (variant) {
+    case "stacked":
+      return /*#__PURE__*/jsxRuntime.jsxs(StackedFooter, {
+        children: [/*#__PURE__*/jsxRuntime.jsxs(StackedSection, {
+          children: [/*#__PURE__*/jsxRuntime.jsxs(StackedBrand, {
+            children: [/*#__PURE__*/jsxRuntime.jsx("h2", {
+              children: footerData.brandName
+            }), /*#__PURE__*/jsxRuntime.jsx("p", {
+              children: footerData.brandDesc
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsx(StackedLinks, {
+            children: footerData.linkGroups.map((group, idx) => /*#__PURE__*/jsxRuntime.jsxs(LinkGroup, {
+              children: [/*#__PURE__*/jsxRuntime.jsx("h4", {
+                children: group.title
+              }), group.links.map((link, linkIdx) => {
+                const {
+                  label,
+                  href
+                } = normalizeLink(link);
+                return /*#__PURE__*/jsxRuntime.jsx("a", {
+                  href: href,
+                  children: label
+                }, linkIdx);
+              })]
+            }, idx))
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs(StackedBottom, {
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            children: footerData.copyright
+          }), /*#__PURE__*/jsxRuntime.jsxs(SocialIcons, {
+            children: [/*#__PURE__*/jsxRuntime.jsx("a", {
+              href: "#",
+              children: /*#__PURE__*/jsxRuntime.jsx(fa.FaFacebookF, {})
+            }), /*#__PURE__*/jsxRuntime.jsx("a", {
+              href: "#",
+              children: /*#__PURE__*/jsxRuntime.jsx(fa.FaInstagram, {})
+            }), /*#__PURE__*/jsxRuntime.jsx("a", {
+              href: "#",
+              children: /*#__PURE__*/jsxRuntime.jsx(fa.FaTwitter, {})
+            }), /*#__PURE__*/jsxRuntime.jsx("a", {
+              href: "#",
+              children: /*#__PURE__*/jsxRuntime.jsx(fa.FaLinkedin, {})
+            })]
+          })]
+        })]
+      });
+    case "columns":
+      return /*#__PURE__*/jsxRuntime.jsxs(ColumnsFooter, {
+        children: [/*#__PURE__*/jsxRuntime.jsxs(ColumnsGrid, {
+          children: [/*#__PURE__*/jsxRuntime.jsxs(ColumnBox, {
+            children: [/*#__PURE__*/jsxRuntime.jsx("h3", {
+              children: footerData.aboutTitle
+            }), /*#__PURE__*/jsxRuntime.jsx("p", {
+              children: footerData.aboutDesc
+            }), /*#__PURE__*/jsxRuntime.jsxs(ContactItem, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(fa.FaPhone, {}), /*#__PURE__*/jsxRuntime.jsx("span", {
+                children: footerData.phone
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsxs(ContactItem, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(fa.FaEnvelope, {}), /*#__PURE__*/jsxRuntime.jsx("span", {
+                children: footerData.email
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsxs(ContactItem, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(fa.FaMapMarkerAlt, {}), /*#__PURE__*/jsxRuntime.jsx("span", {
+                children: footerData.address
+              })]
+            })]
+          }), footerData.columns.map((col, idx) => /*#__PURE__*/jsxRuntime.jsxs(ColumnBox, {
+            children: [/*#__PURE__*/jsxRuntime.jsx("h3", {
+              children: col.title
+            }), col.links && col.links.map((link, linkIdx) => {
+              const {
+                label,
+                href
+              } = normalizeLink(link);
+              return /*#__PURE__*/jsxRuntime.jsx("a", {
+                href: href,
+                children: label
+              }, linkIdx);
+            }), col.desc && /*#__PURE__*/jsxRuntime.jsx("p", {
+              children: col.desc
+            }), idx === footerData.columns.length - 1 && /*#__PURE__*/jsxRuntime.jsxs(SocialIcons, {
+              style: {
+                justifyContent: 'flex-start',
+                marginTop: '1.5rem'
+              },
+              children: [/*#__PURE__*/jsxRuntime.jsx("a", {
+                href: "#",
+                children: /*#__PURE__*/jsxRuntime.jsx(fa.FaFacebookF, {})
+              }), /*#__PURE__*/jsxRuntime.jsx("a", {
+                href: "#",
+                children: /*#__PURE__*/jsxRuntime.jsx(fa.FaInstagram, {})
+              }), /*#__PURE__*/jsxRuntime.jsx("a", {
+                href: "#",
+                children: /*#__PURE__*/jsxRuntime.jsx(fa.FaTwitter, {})
+              })]
+            })]
+          }, idx))]
+        }), /*#__PURE__*/jsxRuntime.jsxs(ColumnsDivider, {
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            children: "\xA9 2025 Paradise Resort. Hak Cipta Dilindungi."
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            children: "Dirancang dengan \u2764\uFE0F untuk pengalaman mewah"
+          })]
+        })]
+      });
+    case "centered":
+      return /*#__PURE__*/jsxRuntime.jsx(CenteredFooter, {
+        children: /*#__PURE__*/jsxRuntime.jsxs(CenteredContent, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(CenteredLogo, {
+            children: footerData.logo
+          }), /*#__PURE__*/jsxRuntime.jsx(CenteredTagline, {
+            children: footerData.tagline
+          }), /*#__PURE__*/jsxRuntime.jsx(CenteredNav, {
+            children: footerData.links.map((link, idx) => {
+              const {
+                label,
+                href
+              } = normalizeLink(link);
+              return /*#__PURE__*/jsxRuntime.jsx("a", {
+                href: href,
+                children: label
+              }, idx);
+            })
+          }), /*#__PURE__*/jsxRuntime.jsxs(CenteredSocial, {
+            children: [/*#__PURE__*/jsxRuntime.jsx("a", {
+              href: "#",
+              children: /*#__PURE__*/jsxRuntime.jsx(fa.FaFacebookF, {})
+            }), /*#__PURE__*/jsxRuntime.jsx("a", {
+              href: "#",
+              children: /*#__PURE__*/jsxRuntime.jsx(fa.FaInstagram, {})
+            }), /*#__PURE__*/jsxRuntime.jsx("a", {
+              href: "#",
+              children: /*#__PURE__*/jsxRuntime.jsx(fa.FaTwitter, {})
+            }), /*#__PURE__*/jsxRuntime.jsx("a", {
+              href: "#",
+              children: /*#__PURE__*/jsxRuntime.jsx(fa.FaLinkedin, {})
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsx(CenteredCopyright, {
+            children: footerData.copyright
+          })]
+        })
+      });
+    default:
+      return null;
+  }
+}
+
+const variantStyles = {
+  compact: {
+    background: "#2c3e50",
+    color: "#ecf0f1",
+    hover: "#34495e",
+    title: "Menu"
+  },
+  expanded: {
+    background: "linear-gradient(180deg, #232526 0%, #414345 100%)",
+    color: "#fff",
+    hover: "rgba(255,255,255,0.1)",
+    title: "Navigation"
+  },
+  floating: {
+    background: "rgba(255, 255, 255, 0.95)",
+    color: "#2c3e50",
+    hover: "#f0f0f0",
+    title: "Components"
+  }
+};
+
+// Default icons mapping
+const defaultIcons = {
+  header: /*#__PURE__*/jsxRuntime.jsx(fa.FaHome, {}),
+  card: /*#__PURE__*/jsxRuntime.jsx(fa.FaBed, {}),
+  button: /*#__PURE__*/jsxRuntime.jsx(fa.FaConciergeBell, {}),
+  footer: /*#__PURE__*/jsxRuntime.jsx(fa.FaInfoCircle, {}),
+  sidebar: /*#__PURE__*/jsxRuntime.jsx(fa.FaUser, {})
+};
+
+// Default items fallback
+const defaultItems = [{
+  name: "Header",
+  href: "#",
+  icon: /*#__PURE__*/jsxRuntime.jsx(fa.FaHome, {})
+}, {
+  name: "Card",
+  href: "#",
+  icon: /*#__PURE__*/jsxRuntime.jsx(fa.FaBed, {})
+}, {
+  name: "Button",
+  href: "#",
+  icon: /*#__PURE__*/jsxRuntime.jsx(fa.FaConciergeBell, {})
+}, {
+  name: "Footer",
+  href: "#",
+  icon: /*#__PURE__*/jsxRuntime.jsx(fa.FaInfoCircle, {})
+}, {
+  name: "Sidebar",
+  href: "#",
+  icon: /*#__PURE__*/jsxRuntime.jsx(fa.FaUser, {})
+}];
+const CompactSidebar = styled.aside`
+  font-family: "Inter", sans-serif;
+  background: ${variantStyles.compact.background};
+  color: ${variantStyles.compact.color};
+  width: 70px;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1.5rem 0;
+  gap: 0.5rem;
+  position: sticky;
+  top: 0;
+  border-right: 3px solid #3498db;
+
+  @media (max-width: 768px) {
+    min-height: auto;
+    height: 100%;
+    padding: 1rem 0;
+  }
+`;
+const CompactTitle = styled.div`
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  font-weight: 800;
+  font-size: 1.1rem;
+  margin-bottom: 2rem;
+  letter-spacing: 2px;
+  color: #3498db;
+
+  @media (max-width: 768px) {
+    font-size: 0.9rem;
+    margin-bottom: 1.5rem;
+  }
+`;
+const CompactItemLink = styled(Link)`
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: inherit;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  text-decoration: none;
+  
+  svg {
+    font-size: 22px;
+  }
+  
+  &:hover {
+    background: ${variantStyles.compact.hover};
+    transform: scale(1.1);
+  }
+  
+  &::after {
+    content: attr(data-label);
+    position: absolute;
+    left: 70px;
+    background: #2c3e50;
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    font-size: 14px;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+    z-index: 1000;
+  }
+  
+  &:hover::after {
+    opacity: 1;
+  }
+
+  @media (max-width: 768px) {
+    width: 40px;
+    height: 40px;
+    
+    svg {
+      font-size: 18px;
+    }
+
+    &::after {
+      display: none;
+    }
+  }
+`;
+const CompactItemButton = styled.button`
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: inherit;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  
+  svg {
+    font-size: 22px;
+  }
+  
+  &:hover {
+    background: ${variantStyles.compact.hover};
+    transform: scale(1.1);
+  }
+  
+  &::after {
+    content: attr(data-label);
+    position: absolute;
+    left: 70px;
+    background: #2c3e50;
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    font-size: 14px;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+    z-index: 1000;
+  }
+  
+  &:hover::after {
+    opacity: 1;
+  }
+
+  @media (max-width: 768px) {
+    width: 40px;
+    height: 40px;
+    
+    svg {
+      font-size: 18px;
+    }
+
+    &::after {
+      display: none;
+    }
+  }
+`;
+const ExpandedSidebar = styled.aside`
+  font-family: "Poppins", sans-serif;
+  background: ${variantStyles.expanded.background};
+  color: ${variantStyles.expanded.color};
+  width: 260px;
+  min-height: 100vh;
+  padding: 2rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  position: sticky;
+  top: 0;
+  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
+
+  @media (max-width: 400px) {
+    width: 100%;
+    min-height: auto;
+  }
+`;
+const ExpandedTitle = styled.h2`
+  font-size: 1.5rem;
+  font-weight: 800;
+  margin: 0 0 2rem 1rem;
+  letter-spacing: 1px;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+`;
+const ExpandedSection = styled.div`
+  margin-bottom: 1.5rem;
+`;
+const SectionLabel = styled.div`
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  opacity: 0.5;
+  margin: 1rem 0 0.5rem 1rem;
+  font-weight: 700;
+`;
+const ExpandedItemLink = styled(Link)`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.9rem 1.2rem;
+  background: none;
+  border: none;
+  color: inherit;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 15px;
+  font-weight: 500;
+  position: relative;
+  overflow: hidden;
+  text-decoration: none;
+  
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 4px;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+  
+  &:hover::before {
+    opacity: 1;
+  }
+  
+  &:hover {
+    background: ${variantStyles.expanded.hover};
+    transform: translateX(5px);
+  }
+`;
+const ExpandedItemButton = styled.button`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.9rem 1.2rem;
+  background: none;
+  border: none;
+  color: inherit;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 15px;
+  font-weight: 500;
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 4px;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+  
+  &:hover::before {
+    opacity: 1;
+  }
+  
+  &:hover {
+    background: ${variantStyles.expanded.hover};
+    transform: translateX(5px);
+  }
+`;
+const ItemLeft = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  
+  svg {
+    font-size: 18px;
+    opacity: 0.8;
+  }
+`;
+const FloatingSidebar = styled.aside`
+  font-family: "Poppins", sans-serif;
+  background: ${variantStyles.floating.background};
+  color: ${variantStyles.floating.color};
+  width: 240px;
+  min-height: calc(100vh - 40px);
+  margin: 20px;
+  padding: 2rem 0.8rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  position: sticky;
+  top: 20px;
+  border-radius: 24px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+
+  @media (max-width: 400px) {
+    width: calc(100% - 40px);
+  }
+`;
+const FloatingTitle = styled.h3`
+  font-size: 1.2rem;
+  font-weight: 700;
+  margin: 0 0 1.5rem 1rem;
+  color: #2c3e50;
+`;
+const FloatingItemLink = styled(Link)`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 1.2rem;
+  background: none;
+  border: none;
+  color: inherit;
+  border-radius: 14px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  font-size: 15px;
+  font-weight: 600;
+  text-decoration: none;
+  
+  svg {
+    font-size: 20px;
+    padding: 8px;
+    background: linear-gradient(135deg, #667eea20, #764ba220);
+    border-radius: 10px;
+    color: #667eea;
+    transition: all 0.3s;
+  }
+  
+  &:hover {
+    background: ${variantStyles.floating.hover};
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+  
+  &:hover svg {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    transform: rotate(10deg);
+  }
+`;
+const FloatingItemButton = styled.button`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 1.2rem;
+  background: none;
+  border: none;
+  color: inherit;
+  border-radius: 14px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  font-size: 15px;
+  font-weight: 600;
+  
+  svg {
+    font-size: 20px;
+    padding: 8px;
+    background: linear-gradient(135deg, #667eea20, #764ba220);
+    border-radius: 10px;
+    color: #667eea;
+    transition: all 0.3s;
+  }
+  
+  &:hover {
+    background: ${variantStyles.floating.hover};
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+  
+  &:hover svg {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    transform: rotate(10deg);
+  }
+`;
+
+// Helper function to get icon for an item
+const getItemIcon = item => {
+  if (item.icon) return item.icon;
+  const name = (item.name || item.label || "").toLowerCase();
+  return defaultIcons[name] || /*#__PURE__*/jsxRuntime.jsx(fa.FaHome, {});
+};
+
+// Helper function to get item display name
+const getItemName = item => {
+  return item.name || item.label || "Menu";
+};
+function SidebarVariant({
+  variant = "compact",
+  items,
+  onSelect,
+  title
+}) {
+  // Use provided items or fallback to defaults
+  const menuItems = items && items.length > 0 ? items : defaultItems;
+
+  // Get title based on variant or use custom title
+  const sidebarTitle = title || variantStyles[variant]?.title || "Menu";
+  const renderCompactItem = (item, index) => {
+    const icon = getItemIcon(item);
+    const name = getItemName(item);
+    const hasHref = item.href && item.href !== "";
+    if (hasHref) {
+      return /*#__PURE__*/jsxRuntime.jsx(CompactItemLink, {
+        href: item.href,
+        "data-label": name,
+        onClick: () => onSelect?.(name.toLowerCase()),
+        children: icon
+      }, item.name || item.label || index);
+    }
+    return /*#__PURE__*/jsxRuntime.jsx(CompactItemButton, {
+      "data-label": name,
+      onClick: () => onSelect?.(name.toLowerCase()),
+      children: icon
+    }, item.name || item.label || index);
+  };
+  const renderExpandedItem = (item, index) => {
+    const icon = getItemIcon(item);
+    const name = getItemName(item);
+    const hasHref = item.href && item.href !== "";
+    if (hasHref) {
+      return /*#__PURE__*/jsxRuntime.jsxs(ExpandedItemLink, {
+        href: item.href,
+        onClick: () => onSelect?.(name.toLowerCase()),
+        children: [/*#__PURE__*/jsxRuntime.jsxs(ItemLeft, {
+          children: [icon, /*#__PURE__*/jsxRuntime.jsx("span", {
+            children: name
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx(fa.FaChevronRight, {
+          size: 14,
+          style: {
+            opacity: 0.5
+          }
+        })]
+      }, item.name || item.label || index);
+    }
+    return /*#__PURE__*/jsxRuntime.jsxs(ExpandedItemButton, {
+      onClick: () => onSelect?.(name.toLowerCase()),
+      children: [/*#__PURE__*/jsxRuntime.jsxs(ItemLeft, {
+        children: [icon, /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: name
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(fa.FaChevronRight, {
+        size: 14,
+        style: {
+          opacity: 0.5
+        }
+      })]
+    }, item.name || item.label || index);
+  };
+  const renderFloatingItem = (item, index) => {
+    const icon = getItemIcon(item);
+    const name = getItemName(item);
+    const hasHref = item.href && item.href !== "";
+    if (hasHref) {
+      return /*#__PURE__*/jsxRuntime.jsxs(FloatingItemLink, {
+        href: item.href,
+        onClick: () => onSelect?.(name.toLowerCase()),
+        children: [icon, /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: name
+        })]
+      }, item.name || item.label || index);
+    }
+    return /*#__PURE__*/jsxRuntime.jsxs(FloatingItemButton, {
+      onClick: () => onSelect?.(name.toLowerCase()),
+      children: [icon, /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: name
+      })]
+    }, item.name || item.label || index);
+  };
+  switch (variant) {
+    case "compact":
+      return /*#__PURE__*/jsxRuntime.jsxs(CompactSidebar, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(CompactTitle, {
+          children: sidebarTitle
+        }), menuItems.map((item, index) => renderCompactItem(item, index))]
+      });
+    case "expanded":
+      return /*#__PURE__*/jsxRuntime.jsxs(ExpandedSidebar, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(ExpandedTitle, {
+          children: sidebarTitle
+        }), /*#__PURE__*/jsxRuntime.jsxs(ExpandedSection, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(SectionLabel, {
+            children: "Components"
+          }), menuItems.map((item, index) => renderExpandedItem(item, index))]
+        })]
+      });
+    case "floating":
+      return /*#__PURE__*/jsxRuntime.jsxs(FloatingSidebar, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(FloatingTitle, {
+          children: sidebarTitle
+        }), menuItems.map((item, index) => renderFloatingItem(item, index))]
+      });
+    default:
+      return null;
+  }
+}
+
+exports.ButtonVariant = ButtonVariant;
+exports.CardVariant = CardVariant;
+exports.FooterVariant = FooterVariant;
+exports.HeaderVariant = HeaderVariant;
+exports.SidebarVariant = SidebarVariant;