@akinon/projectzero 2.0.0-beta.20 → 2.0.0-beta.22

package/app-template/src/views/header/header-content.tsx

@@ -1,1026 +0,0 @@
-'use client';
-
-/**
- * Header Content Component
- *
- * Client component that renders the header content based on the selected layout.
- * Uses the HeaderLayoutContext to determine which layout to display.
- */
-
-import {
-  ReactNode,
-  useCallback,
-  useMemo,
-  useState,
-  useEffect,
-  useRef
-} from 'react';
-import clsx from 'clsx';
-import {
-  useHeaderLayout,
-  HeaderLayoutType,
-  MenuPositionType,
-  SearchPositionType,
-  HEADER_LAYOUT_BLOCKS,
-  HEADER_LAYOUT_PLACEHOLDER_ID,
-  HEADER_LAYOUT_SECTION_ID
-} from './header-layout-registrar';
-import HeaderSearchRegistrar, {
-  useHeaderSearch,
-  InitialSearchSettings
-} from './header-search-registrar';
-import HeaderLanguageRegistrar, {
-  useHeaderLanguage
-} from './header-language-registrar';
-import HeaderCurrencyRegistrar, {
-  useHeaderCurrency
-} from './header-currency-registrar';
-import HeaderTextSliderRegistrar, {
-  useHeaderTextSlider
-} from './header-text-slider-registrar';
-import HeaderAnnouncementRegistrar, {
-  useHeaderAnnouncement
-} from './header-announcement-registrar';
-import InlineSearch from './inline-search';
-import { LanguageSelect } from '@theme/components/language-select';
-import { CurrencySelect } from '@theme/components/currency-select';
-import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
-import type {
-  HeaderLanguageSettings,
-  HeaderCurrencySettings,
-  HeaderTextSliderSettings,
-  HeaderAnnouncementSettings
-} from './server-settings-parser';
-
-interface HeaderContentProps {
-  logo: ReactNode;
-  navbar: ReactNode;
-  icons: ReactNode;
-  mobileHamburger: ReactNode;
-  mobileMenu: ReactNode;
-  className?: string;
-  menuPosition?: MenuPositionType;
-  searchPosition?: SearchPositionType;
-  /** Initial search settings from server-side parsing (to avoid flash) */
-  initialSearchSettings?: InitialSearchSettings;
-  /** Initial language settings from server-side parsing (to avoid flash) */
-  initialLanguageSettings?: HeaderLanguageSettings;
-  /** Initial currency settings from server-side parsing (to avoid flash) */
-  initialCurrencySettings?: HeaderCurrencySettings;
-  /** Initial text slider settings from server-side parsing (to avoid flash) */
-  initialTextSliderSettings?: HeaderTextSliderSettings;
-  /** Initial announcement bar settings from server-side parsing (to avoid flash) */
-  initialAnnouncementSettings?: HeaderAnnouncementSettings;
-}
-
-/**
- * Convert block styles to CSS properties
- */
-function convertBlockStyles(
-  styles: Record<string, unknown> | undefined
-): React.CSSProperties {
-  if (!styles) return {};
-
-  const result: Record<string, unknown> = {};
-
-  // Map theme editor keys to CSS property names
-  const styleMap: Record<string, string> = {
-    'background-color': 'backgroundColor',
-    'border-color': 'borderColor',
-    'border-width': 'borderWidth',
-    'border-radius': 'borderRadius',
-    'border-style': 'borderStyle',
-    'padding-top': 'paddingTop',
-    'padding-bottom': 'paddingBottom',
-    'padding-left': 'paddingLeft',
-    'padding-right': 'paddingRight',
-    'margin-top': 'marginTop',
-    'margin-bottom': 'marginBottom',
-    'margin-left': 'marginLeft',
-    'margin-right': 'marginRight',
-    'min-width': 'minWidth',
-    'max-width': 'maxWidth',
-    'font-size': 'fontSize',
-    'font-weight': 'fontWeight',
-    'font-family': 'fontFamily',
-    'line-height': 'lineHeight',
-    'text-align': 'textAlign',
-    // Theme editor background properties
-    bgColor: 'backgroundColor',
-    BgOpacity: null // Skip, already applied via background
-  };
-
-  // Keys to skip (helper properties that shouldn't be applied directly)
-  const skipKeys = new Set(['bgColor', 'BgOpacity']);
-
-  Object.entries(styles).forEach(([key, value]) => {
-    // Skip helper keys
-    if (skipKeys.has(key)) return;
-
-    const cssKey = styleMap[key] || key;
-    // Skip if explicitly mapped to null
-    if (cssKey === null) return;
-
-    // Extract desktop value if responsive
-    if (value && typeof value === 'object' && 'desktop' in value) {
-      result[cssKey] = (value as Record<string, unknown>).desktop;
-    } else {
-      result[cssKey] = value;
-    }
-  });
-
-  // Auto-add border-style: solid if border-width is set
-  if (result.borderWidth && !result.borderStyle) {
-    result.borderStyle = 'solid';
-  }
-
-  return result as React.CSSProperties;
-}
-
-/**
- * Selectable Row Container
- * Wraps row content with theme editor selection support
- */
-interface SelectableRowProps {
-  blockId: string;
-  blockLabel: string;
-  children: ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-function SelectableRow({
-  blockId,
-  blockLabel,
-  children,
-  className,
-  style
-}: SelectableRowProps) {
-  const { isDesigner, selectedBlockId, getBlockStyles } = useHeaderLayout();
-
-  const { handleClick } = useDesignerFeatures({
-    blockId,
-    placeholderId: HEADER_LAYOUT_PLACEHOLDER_ID,
-    sectionId: HEADER_LAYOUT_SECTION_ID,
-    isDesigner,
-    blockInfo: {
-      id: blockId,
-      type: 'container',
-      label: blockLabel
-    }
-  });
-
-  const isSelected = selectedBlockId === blockId;
-  const blockStyles = getBlockStyles(blockId);
-  const computedStyles = useMemo(
-    () => convertBlockStyles(blockStyles),
-    [blockStyles]
-  );
-
-  const handleContainerClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (isDesigner) {
-        e.preventDefault();
-        e.stopPropagation();
-        handleClick(e);
-      }
-    },
-    [isDesigner, handleClick]
-  );
-
-  return (
-    <div
-      data-block-id={blockId}
-      onClick={handleContainerClick}
-      className={clsx(
-        className,
-        isDesigner && 'cursor-pointer',
-        isSelected && 'ring-2 ring-blue-500 ring-inset'
-      )}
-      style={{ ...style, ...computedStyles }}
-    >
-      {children}
-    </div>
-  );
-}
-
-/**
- * Search Input Wrapper
- * Wraps the InlineSearch component with theme editor support
- */
-function SearchInputWrapper() {
-  const {
-    isSectionVisible,
-    properties,
-    sectionStyles,
-    getBlockStyles,
-    getBlockProperties,
-    isDesigner,
-    selectedBlockId
-  } = useHeaderSearch();
-
-  // Merge width (and potential responsive widths) from properties into styles
-  // Must be called before early return to satisfy React hooks rules
-  const mergedSectionStyles = useMemo(() => {
-    const result = { ...(sectionStyles as Record<string, unknown>) };
-
-    const resolveValue = (value: unknown) => {
-      if (value === null || value === undefined) return undefined;
-      if (typeof value === 'string' || typeof value === 'number') return value;
-      if (typeof value === 'object') {
-        const obj = value as Record<string, string | number>;
-        return obj.desktop ?? obj.mobile ?? Object.values(obj)[0];
-      }
-      return undefined;
-    };
-
-    const width = resolveValue(properties.width);
-    if (width !== undefined) {
-      result.width = width;
-    }
-
-    return result as React.CSSProperties;
-  }, [properties.width, sectionStyles]);
-
-  if (!isSectionVisible) {
-    return null;
-  }
-
-  const placeholder =
-    typeof properties.placeholder === 'object'
-      ? (properties.placeholder as Record<string, string>).desktop ||
-        'Search products...'
-      : properties.placeholder || 'Search products...';
-
-  // Merge block styles and properties for icon
-  const iconBlockStyles = getBlockStyles('header-search-icon') || {};
-  const iconBlockProps = getBlockProperties('header-search-icon') || {};
-  const iconStyles = { ...iconBlockStyles, ...iconBlockProps };
-
-  // Check if custom width is set to avoid w-full overriding it
-  const hasCustomWidth = mergedSectionStyles.width !== undefined;
-
-  return (
-    <div data-section-id="header-search">
-      <InlineSearch
-        placeholder={placeholder}
-        className={hasCustomWidth ? undefined : 'w-full'}
-        style={mergedSectionStyles}
-        iconStyles={iconStyles}
-        blockId="header-search-icon"
-        isDesigner={isDesigner}
-        isSelected={selectedBlockId === 'header-search-icon'}
-      />
-    </div>
-  );
-}
-
-/**
- * Language Select Wrapper
- * Wraps the LanguageSelect component with theme editor support
- */
-function LanguageSelectWrapper() {
-  const {
-    isSectionVisible,
-    properties,
-    sectionStyles,
-    isDesigner,
-    isLanguageSectionSelected
-  } = useHeaderLanguage();
-
-  // Convert styles for CSS using shared function
-  const computedStyles = useMemo(
-    () => convertBlockStyles(sectionStyles),
-    [sectionStyles]
-  );
-
-  // Handle click to select section in designer mode
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (isDesigner && window.parent) {
-        e.preventDefault();
-        e.stopPropagation();
-        window.parent.postMessage(
-          {
-            type: 'SELECT_SECTION',
-            data: {
-              placeholderId: 'header',
-              sectionId: 'header-language'
-            }
-          },
-          '*'
-        );
-      }
-    },
-    [isDesigner]
-  );
-
-  if (!isSectionVisible) {
-    return null;
-  }
-
-  const showIcon =
-    typeof properties.showIcon === 'object'
-      ? (properties.showIcon as Record<string, boolean>).desktop ?? true
-      : properties.showIcon ?? true;
-
-  const labelFormat =
-    typeof properties.labelFormat === 'object'
-      ? (properties.labelFormat as Record<string, string>).desktop ?? 'full'
-      : properties.labelFormat ?? 'full';
-
-  // Custom icon from properties - handle responsive format
-  const customIcon =
-    typeof properties.icon === 'object'
-      ? (properties.icon as Record<string, string>).desktop ?? ''
-      : (properties.icon as string) ?? '';
-
-  return (
-    <div
-      data-section-id="header-language"
-      style={computedStyles}
-      onClick={handleClick}
-      className={clsx(
-        isDesigner && 'cursor-pointer',
-        isLanguageSectionSelected && 'ring-2 ring-blue-500 ring-inset'
-      )}
-    >
-      <div style={{ pointerEvents: isDesigner ? 'none' : 'auto' }}>
-        <LanguageSelect
-          showIcon={showIcon}
-          labelFormat={labelFormat as 'full' | 'short' | 'code'}
-          customIcon={customIcon}
-        />
-      </div>
-    </div>
-  );
-}
-
-/**
- * Currency Select Wrapper
- * Wraps the CurrencySelect component with theme editor support
- */
-function CurrencySelectWrapper() {
-  const {
-    isSectionVisible,
-    properties,
-    sectionStyles,
-    isDesigner,
-    isCurrencySectionSelected
-  } = useHeaderCurrency();
-
-  // Convert styles for CSS using shared function
-  const computedStyles = useMemo(
-    () => convertBlockStyles(sectionStyles),
-    [sectionStyles]
-  );
-
-  // Handle click to select section in designer mode
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (isDesigner && window.parent) {
-        e.preventDefault();
-        e.stopPropagation();
-        window.parent.postMessage(
-          {
-            type: 'SELECT_SECTION',
-            data: {
-              placeholderId: 'header',
-              sectionId: 'header-currency'
-            }
-          },
-          '*'
-        );
-      }
-    },
-    [isDesigner]
-  );
-
-  if (!isSectionVisible) {
-    return null;
-  }
-
-  const showIcon =
-    typeof properties.showIcon === 'object'
-      ? (properties.showIcon as Record<string, boolean>).desktop ?? true
-      : properties.showIcon ?? true;
-
-  const labelFormat =
-    typeof properties.labelFormat === 'object'
-      ? (properties.labelFormat as Record<string, string>).desktop ?? 'full'
-      : properties.labelFormat ?? 'full';
-
-  // Custom icon from properties - handle responsive format
-  const customIcon =
-    typeof properties.icon === 'object'
-      ? (properties.icon as Record<string, string>).desktop ?? ''
-      : (properties.icon as string) ?? '';
-
-  return (
-    <div
-      data-section-id="header-currency"
-      style={computedStyles}
-      onClick={handleClick}
-      className={clsx(
-        isDesigner && 'cursor-pointer',
-        isCurrencySectionSelected && 'ring-2 ring-blue-500 ring-inset'
-      )}
-    >
-      <div style={{ pointerEvents: isDesigner ? 'none' : 'auto' }}>
-        <CurrencySelect
-          showIcon={showIcon}
-          labelFormat={labelFormat as 'full' | 'symbol' | 'code'}
-          customIcon={customIcon}
-        />
-      </div>
-    </div>
-  );
-}
-
-/**
- * Text Slider Wrapper
- * Wraps the Text Slider component with theme editor support
- * Positioned absolutely centered in the utility bar
- */
-const DEFAULT_ITEMS: Array<{ text: string; link?: string }> = [
-  { text: 'Welcome to our store!' }
-];
-
-function TextSliderWrapper() {
-  const {
-    isSectionVisible,
-    properties,
-    sectionStyles,
-    isDesigner,
-    isTextSliderSectionSelected
-  } = useHeaderTextSlider();
-
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const [prevIndex, setPrevIndex] = useState<number | null>(null);
-  const [slideDirection, setSlideDirection] = useState<'left' | 'right'>(
-    'left'
-  );
-  const [isAnimating, setIsAnimating] = useState(false);
-
-  // Convert styles for CSS using shared function
-  const computedStyles = useMemo(
-    () => convertBlockStyles(sectionStyles),
-    [sectionStyles]
-  );
-
-  // Handle click to select section in designer mode
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (isDesigner && window.parent) {
-        e.preventDefault();
-        e.stopPropagation();
-        window.parent.postMessage(
-          {
-            type: 'SELECT_SECTION',
-            data: {
-              placeholderId: 'header',
-              sectionId: 'header-text-slider'
-            }
-          },
-          '*'
-        );
-      }
-    },
-    [isDesigner]
-  );
-
-  // Stable reference to items using JSON comparison
-  const itemsJsonRef = useRef<string>('');
-  const itemsRef = useRef(DEFAULT_ITEMS);
-
-  // Only update items ref when the actual data changes
-  const propItemsJson = JSON.stringify(properties.items);
-  if (propItemsJson !== itemsJsonRef.current) {
-    itemsJsonRef.current = propItemsJson;
-    const propItems = properties.items;
-    if (Array.isArray(propItems) && propItems.length > 0) {
-      itemsRef.current = propItems;
-    } else {
-      itemsRef.current = DEFAULT_ITEMS;
-    }
-  }
-
-  const items = itemsRef.current;
-  const autoPlay = properties.autoPlay !== false;
-  const autoPlayInterval = properties.autoPlayInterval || 3000;
-  const showArrows = properties.showArrows !== false;
-
-  // Refs for values needed in effects/intervals
-  const autoPlayRef = useRef(autoPlay);
-  const autoPlayIntervalRef = useRef(autoPlayInterval);
-  const itemsLengthRef = useRef(items.length);
-  const isAnimatingRef = useRef(isAnimating);
-  const currentIndexRef = useRef(currentIndex);
-
-  // Update refs on each render
-  autoPlayRef.current = autoPlay;
-  autoPlayIntervalRef.current = autoPlayInterval;
-  itemsLengthRef.current = items.length;
-  isAnimatingRef.current = isAnimating;
-  currentIndexRef.current = currentIndex;
-
-  // Reset current index if out of bounds
-  useEffect(() => {
-    if (currentIndex >= itemsLengthRef.current) {
-      setCurrentIndex(0);
-    }
-  }, [currentIndex]);
-
-  // Handle slide transition
-  const performSlide = useCallback(
-    (direction: 'left' | 'right', newIndex: number) => {
-      setIsAnimating(true);
-      setSlideDirection(direction);
-      setPrevIndex(currentIndexRef.current);
-      setCurrentIndex(newIndex);
-      setTimeout(() => {
-        setPrevIndex(null);
-        setIsAnimating(false);
-      }, 400);
-    },
-    []
-  );
-
-  // Auto-play functionality
-  useEffect(() => {
-    if (!autoPlayRef.current || itemsLengthRef.current <= 1) return;
-
-    const interval = setInterval(() => {
-      if (
-        !autoPlayRef.current ||
-        itemsLengthRef.current <= 1 ||
-        isAnimatingRef.current
-      )
-        return;
-
-      const newIndex = (currentIndexRef.current + 1) % itemsLengthRef.current;
-      performSlide('left', newIndex);
-    }, autoPlayIntervalRef.current);
-
-    return () => clearInterval(interval);
-  }, [performSlide]);
-
-  // Navigation handlers
-  const goToPrev = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      if (isAnimating) return;
-      const newIndex = (currentIndex - 1 + items.length) % items.length;
-      performSlide('right', newIndex);
-    },
-    [currentIndex, items.length, isAnimating, performSlide]
-  );
-
-  const goToNext = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      if (isAnimating) return;
-      const newIndex = (currentIndex + 1) % items.length;
-      performSlide('left', newIndex);
-    },
-    [currentIndex, items.length, isAnimating, performSlide]
-  );
-
-  if (!isSectionVisible) {
-    return null;
-  }
-
-  const currentItem = items[currentIndex];
-
-  return (
-    <div
-      data-section-id="header-text-slider"
-      onClick={handleClick}
-      className={clsx(
-        'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
-        'flex items-center gap-2',
-        isDesigner && 'cursor-pointer',
-        isTextSliderSectionSelected && 'ring-2 ring-blue-500 ring-inset'
-      )}
-      style={{
-        ...computedStyles,
-        pointerEvents: isDesigner ? 'auto' : undefined
-      }}
-    >
-      {/* Previous Arrow */}
-      {showArrows && items.length > 1 && (
-        <button
-          onClick={goToPrev}
-          className="flex items-center justify-center w-6 h-6 text-current hover:opacity-70 transition-opacity"
-          style={{ pointerEvents: isDesigner ? 'none' : 'auto' }}
-        >
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-          >
-            <polyline points="15,18 9,12 15,6" />
-          </svg>
-        </button>
-      )}
-
-      {/* Text Content with Slide Animation */}
-      {/* Container uses grid to size based on longest item */}
-      <div className="relative overflow-hidden">
-        {/* Hidden items to establish container width - all invisible */}
-        <div className="grid invisible" aria-hidden="true">
-          {items.map((item, index) => (
-            <span
-              key={index}
-              className="col-start-1 row-start-1 whitespace-nowrap"
-            >
-              {item.text}
-            </span>
-          ))}
-        </div>
-        {/* Exiting item (slides out) */}
-        {prevIndex !== null && (
-          <span
-            key={`prev-${prevIndex}`}
-            className={clsx(
-              'absolute inset-0 whitespace-nowrap text-center',
-              slideDirection === 'left'
-                ? 'animate-slide-out'
-                : 'animate-slide-out [animation-direction:reverse]'
-            )}
-          >
-            {items[prevIndex]?.link ? (
-              <a href={items[prevIndex].link} className="hover:underline">
-                {items[prevIndex].text}
-              </a>
-            ) : (
-              items[prevIndex]?.text
-            )}
-          </span>
-        )}
-        {/* Entering item (slides in) */}
-        <span
-          key={`current-${currentIndex}-${
-            prevIndex !== null ? 'animating' : 'static'
-          }`}
-          className={clsx(
-            'absolute inset-0 whitespace-nowrap text-center',
-            prevIndex !== null &&
-              (slideDirection === 'left'
-                ? 'animate-slide-in'
-                : 'animate-slide-in [animation-direction:reverse]')
-          )}
-        >
-          {currentItem?.link ? (
-            <a
-              href={currentItem.link}
-              className="hover:underline"
-              style={{ pointerEvents: isDesigner ? 'none' : 'auto' }}
-            >
-              {currentItem.text}
-            </a>
-          ) : (
-            currentItem?.text
-          )}
-        </span>
-      </div>
-
-      {/* Next Arrow */}
-      {showArrows && items.length > 1 && (
-        <button
-          onClick={goToNext}
-          className="flex items-center justify-center w-6 h-6 text-current hover:opacity-70 transition-opacity"
-          style={{ pointerEvents: isDesigner ? 'none' : 'auto' }}
-        >
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-          >
-            <polyline points="9,6 15,12 9,18" />
-          </svg>
-        </button>
-      )}
-    </div>
-  );
-}
-
-function AnnouncementBarWrapper() {
-  const {
-    isSectionVisible,
-    properties,
-    sectionStyles,
-    isDesigner,
-    isAnnouncementSectionSelected
-  } = useHeaderAnnouncement();
-
-  const computedStyles = useMemo(
-    () => convertBlockStyles(sectionStyles),
-    [sectionStyles]
-  );
-
-  const resolvePropValue = (value: unknown, fallback = ''): string => {
-    if (typeof value === 'string') return value;
-    if (typeof value === 'object' && value !== null) {
-      const responsiveValue = value as Record<string, string>;
-      return (
-        responsiveValue.desktop ||
-        responsiveValue.mobile ||
-        Object.values(responsiveValue)[0] ||
-        fallback
-      );
-    }
-    return fallback;
-  };
-
-  const text = resolvePropValue(properties.text, '');
-  const link = resolvePropValue(properties.link, '');
-  const target = resolvePropValue(properties.target, '_self');
-
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (isDesigner && window.parent) {
-        e.preventDefault();
-        e.stopPropagation();
-        window.parent.postMessage(
-          {
-            type: 'SELECT_SECTION',
-            data: {
-              placeholderId: 'header',
-              sectionId: 'header-announcement-bar'
-            }
-          },
-          '*'
-        );
-      }
-    },
-    [isDesigner]
-  );
-
-  if (!isSectionVisible || !text) {
-    return null;
-  }
-
-  return (
-    <div
-      data-section-id="header-announcement-bar"
-      onClick={handleClick}
-      className={clsx(
-        'w-full',
-        isDesigner && 'cursor-pointer',
-        isAnnouncementSectionSelected && 'ring-2 ring-blue-500 ring-inset'
-      )}
-      style={computedStyles}
-    >
-      <div className="container px-2.5 lg:px-5 xl:px-2.5 text-center">
-        {link ? (
-          <a
-            href={link}
-            target={target}
-            rel={target === '_blank' ? 'noopener noreferrer' : undefined}
-            className="hover:underline"
-            style={{ pointerEvents: isDesigner ? 'none' : 'auto' }}
-          >
-            {text}
-          </a>
-        ) : (
-          <span>{text}</span>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/**
- * Utility Row Component
- * Shows Language and Currency selects when added via Theme Editor
- * Only renders when at least one of them is visible
- */
-function UtilityRow() {
-  const { isSectionVisible: isLanguageVisible } = useHeaderLanguage();
-  const { isSectionVisible: isCurrencyVisible } = useHeaderCurrency();
-  const { isSectionVisible: isTextSliderVisible } = useHeaderTextSlider();
-  const { getBlockStyles, utilityPosition } = useHeaderLayout();
-
-  // Get block styles for utility row
-  const blockStyles = getBlockStyles(HEADER_LAYOUT_BLOCKS.UTILITY_ROW.id);
-  const computedStyles = useMemo(
-    () => convertBlockStyles(blockStyles),
-    [blockStyles]
-  );
-
-  // Don't render if nothing is visible
-  if (!isLanguageVisible && !isCurrencyVisible && !isTextSliderVisible) {
-    return null;
-  }
-
-  // Determine justify class based on utility position
-  const justifyClass =
-    utilityPosition === 'left' ? 'justify-start' : 'justify-end';
-
-  // Check if custom padding is set to avoid Tailwind class overriding it
-  const hasCustomPaddingY =
-    computedStyles.paddingTop !== undefined ||
-    computedStyles.paddingBottom !== undefined;
-
-  return (
-    <SelectableRow
-      blockId={HEADER_LAYOUT_BLOCKS.UTILITY_ROW.id}
-      blockLabel={HEADER_LAYOUT_BLOCKS.UTILITY_ROW.label}
-      className="w-full bg-gray-100"
-      style={computedStyles}
-    >
-      <div
-        className={clsx(
-          'container relative flex items-center gap-4 px-2.5 lg:px-5 xl:px-2.5',
-          justifyClass
-        )}
-        style={
-          hasCustomPaddingY
-            ? {
-                paddingTop: computedStyles.paddingTop,
-                paddingBottom: computedStyles.paddingBottom
-              }
-            : undefined
-        }
-      >
-        {/* Text Slider - Absolute positioned in center */}
-        <TextSliderWrapper />
-
-        {/* Language and Currency - positioned based on utilityPosition */}
-        <LanguageSelectWrapper />
-        <CurrencySelectWrapper />
-      </div>
-    </SelectableRow>
-  );
-}
-
-/**
- * Default Layout
- * Single row: [Logo + Navbar] | [Icons]
- */
-function DefaultLayout({
-  logo,
-  navbar,
-  icons,
-  mobileHamburger,
-  mobileMenu,
-  initialAnnouncementSettings,
-  initialLanguageSettings,
-  initialCurrencySettings,
-  initialTextSliderSettings
-}: HeaderContentProps) {
-  return (
-    <>
-      <HeaderAnnouncementRegistrar initialSettings={initialAnnouncementSettings}>
-        <AnnouncementBarWrapper />
-      </HeaderAnnouncementRegistrar>
-
-      {/* Utility Row: Language & Currency Selects & Text Slider */}
-      <HeaderTextSliderRegistrar initialSettings={initialTextSliderSettings}>
-        <HeaderLanguageRegistrar initialSettings={initialLanguageSettings}>
-          <HeaderCurrencyRegistrar initialSettings={initialCurrencySettings}>
-            <UtilityRow />
-          </HeaderCurrencyRegistrar>
-        </HeaderLanguageRegistrar>
-      </HeaderTextSliderRegistrar>
-
-      <SelectableRow
-        blockId={HEADER_LAYOUT_BLOCKS.MAIN_ROW.id}
-        blockLabel={HEADER_LAYOUT_BLOCKS.MAIN_ROW.label}
-        className="w-full"
-      >
-        <div className="container flex items-center justify-between px-2.5 lg:px-5 xl:px-2.5 py-5 sm:py-0">
-          {mobileHamburger}
-          <div className="flex items-center sm:gap-16">
-            {logo}
-            {navbar}
-          </div>
-          {icons}
-          {mobileMenu}
-        </div>
-      </SelectableRow>
-    </>
-  );
-}
-
-/**
- * Two Row Layout
- * Row 1: Logo | Search Input | Icons
- * Row 2: Navigation Menu (full width, position configurable)
- */
-function TwoRowLayout({
-  logo,
-  navbar,
-  icons,
-  mobileHamburger,
-  mobileMenu,
-  menuPosition = 'center',
-  searchPosition = 'center',
-  initialSearchSettings,
-  initialAnnouncementSettings,
-  initialLanguageSettings,
-  initialCurrencySettings,
-  initialTextSliderSettings
-}: HeaderContentProps) {
-  // Map menu position to justify class
-  const menuPositionClass = {
-    left: 'justify-start',
-    center: 'justify-center',
-    right: 'justify-end'
-  }[menuPosition];
-
-  const searchPositionClass = {
-    left: 'justify-start',
-    center: 'justify-center',
-    right: 'justify-end'
-  }[searchPosition];
-
-  return (
-    <>
-      <HeaderAnnouncementRegistrar initialSettings={initialAnnouncementSettings}>
-        <AnnouncementBarWrapper />
-      </HeaderAnnouncementRegistrar>
-
-      {/* Utility Row: Language & Currency Selects & Text Slider */}
-      <HeaderTextSliderRegistrar initialSettings={initialTextSliderSettings}>
-        <HeaderLanguageRegistrar initialSettings={initialLanguageSettings}>
-          <HeaderCurrencyRegistrar initialSettings={initialCurrencySettings}>
-            <UtilityRow />
-          </HeaderCurrencyRegistrar>
-        </HeaderLanguageRegistrar>
-      </HeaderTextSliderRegistrar>
-
-      {/* Row 1: Logo + Search + Icons */}
-      <SelectableRow
-        blockId={HEADER_LAYOUT_BLOCKS.TOP_ROW.id}
-        blockLabel={HEADER_LAYOUT_BLOCKS.TOP_ROW.label}
-        className="w-full"
-      >
-        <div className="container flex items-center justify-between px-2.5 sm:px-0">
-          {mobileHamburger}
-          <div className="flex items-center">{logo}</div>
-          <div className={`hidden sm:flex flex-1 ${searchPositionClass} mx-8`}>
-            <HeaderSearchRegistrar
-              autoRegister
-              initialSettings={initialSearchSettings}
-            >
-              <SearchInputWrapper />
-            </HeaderSearchRegistrar>
-          </div>
-          {icons}
-        </div>
-      </SelectableRow>
-
-      {/* Row 2: Navigation Menu */}
-      <SelectableRow
-        blockId={HEADER_LAYOUT_BLOCKS.BOTTOM_ROW.id}
-        blockLabel={HEADER_LAYOUT_BLOCKS.BOTTOM_ROW.label}
-        className="hidden sm:block w-full border-t border-gray-200"
-      >
-        <div className={`container flex ${menuPositionClass} px-2.5 sm:px-0`}>
-          {navbar}
-        </div>
-      </SelectableRow>
-
-      {mobileMenu}
-    </>
-  );
-}
-
-/**
- * Layout Map
- */
-const LAYOUTS: Record<HeaderLayoutType, React.FC<HeaderContentProps>> = {
-  default: DefaultLayout,
-  'two-row': TwoRowLayout
-};
-
-/**
- * HeaderContent
- *
- * Reads the current layout from context and renders appropriate layout.
- */
-export default function HeaderContent(props: HeaderContentProps) {
-  const { layout, menuPosition, searchPosition } = useHeaderLayout();
-  const LayoutComponent = LAYOUTS[layout] || LAYOUTS.default;
-
-  return (
-    <LayoutComponent
-      {...props}
-      menuPosition={menuPosition}
-      searchPosition={searchPosition}
-      initialSearchSettings={props.initialSearchSettings}
-      initialAnnouncementSettings={props.initialAnnouncementSettings}
-      initialLanguageSettings={props.initialLanguageSettings}
-      initialCurrencySettings={props.initialCurrencySettings}
-      initialTextSliderSettings={props.initialTextSliderSettings}
-    />
-  );
-}