(() => {
  const { useEffect, useMemo, useState, useRef, useCallback } = React;
  const components = window.V3NightComponents = window.V3NightComponents || {};

const LucideIcon = ({ name, size = 24, color = 'currentColor', strokeWidth = 2, style = {}, className = '' }) => {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = '';
      ref.current.setAttribute('data-lucide', name);
      window.lucide.createIcons({ nodes: [ref.current] });
      const svg = ref.current.querySelector('svg') || ref.current;
      if (svg.tagName === 'svg') {
        svg.style.width = `${size}px`;
        svg.style.height = `${size}px`;
        svg.style.stroke = color;
        svg.setAttribute('stroke-width', strokeWidth);
      }
    }
  }, [name, size, color, strokeWidth]);

  return React.createElement('i', {
    ref: ref,
    className: className,
    style: { display: 'inline-flex', alignItems: 'center', ...style }
  });
};

/**
 * Night Header Component
 */
const NightHeader = ({ onSettingsClick, isMobile }) => (
  <header className="night-header">
    <div className="night-header__brand">
      <div className="night-header__logo">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none">
          <path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"/>
          <path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/>
        </svg>
      </div>
      <div>
        <h1 className="night-header__title"><span className="night-header__title-vir">Vir</span><span className="night-header__title-tality">tality</span></h1>
        <p className="night-header__subtitle">Wellness Dashboard</p>
      </div>
    </div>
    <nav className="night-header__nav">
      {!isMobile && (
        <a href="index.html" className="night-header__nav-link">
          Home
        </a>
      )}
      {!isMobile && (
        <a href="index.html#about" className="night-header__nav-link">
          About
        </a>
      )}
      <a href="clean-citations.html" className="night-header__nav-link">
        Citations
      </a>
      <a href="disclaimer.html" className="night-header__nav-link">
        Disclaimer
      </a>
      {!isMobile && (
        <a href="index.html#contact" className="night-header__nav-link">
          Contact
        </a>
      )}
      {onSettingsClick && (
        <button className="night-header__nav-settings" onClick={onSettingsClick} title="Settings">
          <LucideIcon name="settings" size={20} color="#94A3B8" />
        </button>
      )}
    </nav>
  </header>
);

/**
 * Night Navigation Tabs - COMMENTED OUT (moved to header)
 */
/*
const NightNavTabs = ({ activeView, onChangeView }) => {
  const tabs = [
    { id: 'dashboard', icon: 'layout-grid', label: 'Dashboard' },
    { id: 'timeline', icon: 'clock', label: 'Timeline' },
    { id: 'history', icon: 'history', label: 'History' },
    { id: 'settings', icon: 'settings', label: 'Settings' }
  ];

  return (
    <nav className="night-nav">
      {tabs.map(tab => (
        <button
          key={tab.id}
          onClick={() => onChangeView(tab.id)}
          className={`night-nav__btn ${activeView === tab.id ? 'is-active' : ''}`}
        >
          <LucideIcon name={tab.icon} size={18} />
          {tab.label}
        </button>
      ))}
    </nav>
  );
};
*/
const NightNavTabs = () => null;

/**
 * Night Tag Pill Component - Individual clickable pill tag
 */
const NightTagPill = ({ emoji, emojiImage, label, subtitle, isSelected, onClick }) => (
  <button
    type="button"
    className={`night-tag-pill ${isSelected ? 'is-selected' : ''} ${subtitle ? 'has-subtitle' : ''}`}
    onClick={onClick}
  >
    <span className="night-tag-pill__emoji">
      {emojiImage ? (
        <span className="night-tag-pill__emoji-img" style={{ backgroundImage: `url(${emojiImage})` }} />
      ) : (
        emoji
      )}
    </span>
    <span className="night-tag-pill__content">
      <span className="night-tag-pill__label">{label}</span>
      {subtitle && <span className="night-tag-pill__subtitle">{subtitle}</span>}
    </span>
  </button>
);

/**
 * GI Guide Legend - Shows GI color coding with stars
 */
const GIGuideLegend = ({ onCitationClick }) => {
  const handleClick = (e) => {
    if (onCitationClick) {
      e.preventDefault();
      onCitationClick();
    }
  };

  return (
    <div className="gi-guide">
      <div className="gi-guide__title">
        GI GUIDE
        <a
          href="clean-citations.html#citation-2"
          className="gi-guide__citation"
          title="View citations"
          onClick={handleClick}
        >?</a>
      </div>
      {[
        { label: 'Low ≤55', color: '#22C55E' },
        { label: 'Med 56-69', color: '#EAB308' },
        { label: 'High ≥70', color: '#EF4444' },
      ].map(item => (
        <div key={item.label} className="gi-guide__row">
          <div className="gi-guide__color-label">
            <div className="gi-guide__dot" style={{ background: item.color }} />
            <span>{item.label}</span>
          </div>
        </div>
      ))}
    </div>
  );
};

/**
 * GL Guide Legend - Shows GL (Glycemic Load) color coding
 */
const GLGuideLegend = ({ onCitationClick }) => {
  const handleClick = (e) => {
    if (onCitationClick) {
      e.preventDefault();
      onCitationClick();
    }
  };

  return (
    <div className="gi-guide">
      <div className="gi-guide__title">
        GL GUIDE
        <a
          href="clean-citations.html#citation-3"
          className="gi-guide__citation"
          title="View citations"
          onClick={handleClick}
        >?</a>
      </div>
      {[
        { label: 'Low <10', color: '#22C55E' },
        { label: 'Med 10-20', color: '#EAB308' },
        { label: 'High >20', color: '#EF4444' },
      ].map(item => (
        <div key={item.label} className="gi-guide__row">
          <div className="gi-guide__color-label">
            <div className="gi-guide__dot" style={{ background: item.color }} />
            <span>{item.label}</span>
          </div>
        </div>
      ))}
    </div>
  );
};

/**
 * Combined GI/GL Guide - Shows both guides side by side
 */
const GIGLGuide = ({ onCitationClick }) => {
  return (
    <div className="gi-gl-guide-wrapper">
      <GIGuideLegend onCitationClick={onCitationClick} />
      <GLGuideLegend onCitationClick={onCitationClick} />
    </div>
  );
};

  components.LucideIcon = LucideIcon;
  components.NightHeader = NightHeader;
  components.NightNavTabs = NightNavTabs;
  components.NightTagPill = NightTagPill;
  components.GIGuideLegend = GIGuideLegend;
  components.GLGuideLegend = GLGuideLegend;
  components.GIGLGuide = GIGLGuide;
})();