// components/header.jsx — site header with logo, nav, mobile sheet, and sticky mobile CTA

function StarMark({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      {/* Eight-point star + outer ring */}
      <circle cx="12" cy="12" r="11" stroke="currentColor" strokeOpacity="0.4" />
      <path d="M12 2.5l1.4 7.1 7.1 1.4-7.1 1.4-1.4 7.1-1.4-7.1L3.5 11l7.1-1.4z"
            fill="currentColor" />
      <circle cx="12" cy="12" r="1.2" fill="currentColor" />
    </svg>
  );
}

function Logo({ night, onClick }) {
  return (
    <div className="hdr-logo" onClick={onClick}>
      <StarMark size={26} />
      <div className="hdr-logo-stack">
        <span>Sedona Star Show</span>
        <small style={{ color: night ? 'rgba(248,244,232,0.55)' : 'rgba(11,15,26,0.5)' }}>
          Dark Sky · Est. 2019
        </small>
      </div>
    </div>
  );
}

const NAV = [
  { id: 'home',    label: 'Home' },
  { id: 'tours',   label: 'Tours' },
  { id: 'sky',     label: "What You'll See" },
  { id: 'prepare', label: 'Prepare' },
  { id: 'booking', label: 'Book' },
];

function Header({ route, go, night, onBook }) {
  const [sheet, setSheet] = React.useState(false);
  return (
    <header className={night ? 'hdr hdr--night' : 'hdr'}>
      <div className="hdr-inner">
        <Logo night={night} onClick={() => go('home')} />
        <nav className="nav">
          {NAV.map(n => (
            <a key={n.id}
               className={route === n.id ? 'is-active' : ''}
               onClick={() => go(n.id)}>{n.label}</a>
          ))}
        </nav>
        <div className="hdr-actions">
          <button className={night ? 'btn btn--sm btn--ghost-night' : 'btn btn--sm btn--ghost'}
                  onClick={() => go('booking')}
                  style={{ display: 'inline-flex' }}>
            Check availability
          </button>
          <button className="btn btn--sm btn--primary" onClick={onBook}>
            Book a Star Show
          </button>
          <button className="hamburger" onClick={() => setSheet(true)} aria-label="Menu">
            <IconMenu size={18} />
          </button>
        </div>
      </div>

      {sheet && (
        <div className="mobile-sheet">
          <div className="hdr-inner">
            <Logo onClick={() => { setSheet(false); go('home'); }} />
            <button className="hamburger" onClick={() => setSheet(false)} aria-label="Close">
              <IconClose size={18} />
            </button>
          </div>
          <nav className="nav">
            {NAV.map(n => (
              <a key={n.id} onClick={() => { setSheet(false); go(n.id); }}>{n.label}</a>
            ))}
          </nav>
          <div style={{ padding: '24px', marginTop: 'auto' }}>
            <button className="btn btn--primary" style={{ width: '100%' }}
                    onClick={() => { setSheet(false); onBook(); }}>
              Book Tonight
            </button>
          </div>
        </div>
      )}
    </header>
  );
}

function MobileStickyCTA({ onBook, phase }) {
  return (
    <button className="mobile-cta" onClick={onBook}>
      <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <IconStar size={16} stroke={1.6} />
        Book Tonight's Star Show
      </span>
      <span style={{ fontSize: 12, opacity: 0.75, fontWeight: 500 }}>from $115</span>
    </button>
  );
}

Object.assign(window, { Header, MobileStickyCTA, StarMark, Logo, NAV });