/* global React */
const { useState, useEffect } = React;

// ============================================================
// Header — sticky, blurred, scroll-aware
// ============================================================
function Header({ onReserve, sectionIds, activeSection, onNav }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const NavLink = ({ id, label, jp }) => {
    const active = activeSection === id;
    return (
      <a
        href={`#${id}`}
        onClick={(e) => { e.preventDefault(); onNav(id); }}
        style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
          textDecoration: 'none',
          padding: '4px 0',
          borderBottom: active ? '1px solid var(--sonon-brown)' : '1px solid transparent',
          transition: 'border-color 280ms var(--ease-out)',
        }}
      >
        <span style={{
          fontFamily: 'var(--font-sans)', fontSize: 11, letterSpacing: '0.28em',
          textTransform: 'uppercase',
          color: active ? 'var(--sonon-brown)' : 'var(--fg2)',
          transition: 'color 280ms var(--ease-out)',
        }}>{label}</span>
        <span style={{
          fontFamily: 'var(--font-serif)', fontSize: 9, letterSpacing: '0.24em',
          color: 'var(--fg4)',
        }}>{jp}</span>
      </a>
    );
  };

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      paddingLeft: 32,
      paddingRight: 56,
      paddingTop: 10,
      paddingBottom: 10,
      minHeight: 140,
      background: scrolled ? 'rgba(245,242,238,0.92)' : 'rgba(245,242,238,0.0)',
      backdropFilter: scrolled ? 'blur(14px)' : 'blur(0px)',
      WebkitBackdropFilter: scrolled ? 'blur(14px)' : 'blur(0px)',
      borderBottom: scrolled ? '1px solid var(--border-soft)' : '1px solid transparent',
      transition: 'background 320ms var(--ease-out), backdrop-filter 320ms var(--ease-out), border-color 320ms var(--ease-out)',
    }}>
      <a href="#hero" onClick={(e) => { e.preventDefault(); onNav('hero'); }}
         style={{
           display: 'inline-flex', alignItems: 'center', textDecoration: 'none',
           borderBottom: 'none', flexShrink: 0,
         }}>
        <img src="assets/logo_header.png" alt="sonon"
             style={{
               height: 120, width: 'auto', display: 'block',
               transition: 'filter 320ms var(--ease-out)',
               filter: scrolled
                 ? 'brightness(0) saturate(100%) invert(54%) sepia(18%) saturate(564%) hue-rotate(5deg) brightness(92%) contrast(85%)'
                 : 'brightness(0) invert(1)',
             }} />
      </a>

      <nav style={{ display: 'flex', gap: 40 }}>
        {sectionIds.map((s) => (
          <NavLink key={s.id} id={s.id} label={s.label} jp={s.jp} />
        ))}
      </nav>

      {/* Mobile hamburger — hidden on desktop via CSS */}
      <button
        className="sn-hamburger"
        aria-label="menu"
        onClick={() => setMenuOpen(true)}
        style={{
          display: 'none',
          background: 'transparent', border: 0, cursor: 'pointer',
          padding: 8, marginRight: -4,
        }}
      >
        <span style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
          <span style={{ width: 22, height: 1.5, background: scrolled ? 'var(--sonon-brown)' : '#FFFFFF', transition: 'background 320ms var(--ease-out)' }} />
          <span style={{ width: 22, height: 1.5, background: scrolled ? 'var(--sonon-brown)' : '#FFFFFF', transition: 'background 320ms var(--ease-out)' }} />
          <span style={{ width: 14, height: 1.5, background: scrolled ? 'var(--sonon-brown)' : '#FFFFFF', marginLeft: 'auto', transition: 'background 320ms var(--ease-out)' }} />
        </span>
      </button>

      <button onClick={onReserve}
        style={{
          background: 'var(--sonon-brown)', color: '#fff', border: 0,
          padding: '13px 28px', borderRadius: 999,
          fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase',
          fontFamily: 'var(--font-sans)', cursor: 'pointer',
          whiteSpace: 'nowrap',
          transition: 'background 200ms var(--ease-out)',
        }}
        onMouseOver={(e) => e.currentTarget.style.background = 'var(--sonon-brown-500)'}
        onMouseOut={(e) => e.currentTarget.style.background = 'var(--sonon-brown)'}
      >ご予約 · reserve</button>

      {/* ---------- Mobile drawer ---------- */}
      {menuOpen && (
        <div
          onClick={() => setMenuOpen(false)}
          style={{
            position: 'fixed', inset: 0, zIndex: 100,
            background: 'rgba(101,98,92,0.55)',
            backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
            animation: 'sononFadeUp 220ms var(--ease-out)',
          }}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              position: 'fixed', top: 0, right: 0,
              height: '100vh', width: 'min(86vw, 360px)',
              background: '#FFFFFF',
              boxShadow: '-20px 0 60px rgba(0,0,0,0.12)',
              padding: '24px 24px',
              display: 'flex', flexDirection: 'column', gap: 20,
              animation: 'sononFadeUp 320ms var(--ease-out)',
              overflowY: 'auto',
              zIndex: 101,
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{
                fontFamily: 'var(--font-display)', fontStyle: 'italic',
                fontSize: 20, color: 'var(--sonon-brown)', letterSpacing: '0.1em',
              }}>menu</span>
              <button
                onClick={() => setMenuOpen(false)}
                aria-label="close"
                style={{
                  width: 36, height: 36, borderRadius: '50%',
                  border: '1px solid #E5E0D8',
                  background: 'transparent', cursor: 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  position: 'relative',
                }}
              >
                <span style={{ position: 'absolute', width: 14, height: 1, background: '#1A1A1A', transform: 'rotate(45deg)' }} />
                <span style={{ position: 'absolute', width: 14, height: 1, background: '#1A1A1A', transform: 'rotate(-45deg)' }} />
              </button>
            </div>

            <div style={{ height: 1, background: '#EEE9DF' }} />

            <ul style={{ display: 'flex', flexDirection: 'column', gap: 4, padding: 0, margin: 0 }}>
              {sectionIds.map((s) => {
                const active = activeSection === s.id;
                return (
                  <li key={s.id}>
                    <a
                      href={`#${s.id}`}
                      onClick={(e) => { e.preventDefault(); onNav(s.id); setMenuOpen(false); }}
                      style={{
                        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
                        padding: '14px 4px', textDecoration: 'none',
                        borderBottom: '1px solid #EEE9DF',
                      }}
                    >
                      <span style={{
                        fontFamily: 'var(--font-sans)', fontSize: 13,
                        letterSpacing: '0.24em', textTransform: 'uppercase',
                        color: active ? 'var(--sonon-brown)' : '#1A1A1A',
                      }}>{s.label}</span>
                      <span style={{
                        fontFamily: 'var(--font-serif)', fontSize: 12,
                        letterSpacing: '0.12em', color: '#555555',
                      }}>{s.jp}</span>
                    </a>
                  </li>
                );
              })}
            </ul>

            <button
              onClick={() => { onReserve(); setMenuOpen(false); }}
              style={{
                marginTop: 'auto',
                background: 'var(--sonon-brown)', color: '#fff', border: 0,
                padding: '18px 24px', borderRadius: 2,
                fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase',
                fontFamily: 'var(--font-sans)', cursor: 'pointer',
              }}
            >ご予約 · reserve</button>
          </div>
        </div>
      )}
    </header>
  );
}

// ============================================================
// SectionLabel
// ============================================================
function SectionLabel({ kicker, title, jp, align = 'center', ornament = true, light = false }) {
  return (
    <div style={{
      display: 'flex', flexDirection: 'column',
      alignItems: align === 'center' ? 'center' : 'flex-start',
      textAlign: align,
      gap: 18,
    }}>
      <div style={{
        fontFamily: 'var(--font-sans)', fontSize: 11, letterSpacing: '0.32em',
        textTransform: 'uppercase',
        color: light ? 'var(--sonon-gold-soft)' : 'var(--accent)',
      }}>
        {ornament && '— '}{kicker}{ornament && ' —'}
      </div>
      <h2 style={{
        fontFamily: 'var(--font-display)', fontSize: 46, fontWeight: 300,
        letterSpacing: '0.04em',
        color: light ? '#F5F2EE' : 'var(--fg1)',
        margin: 0, lineHeight: 1.15,
      }}>{title}</h2>
      {jp && <div style={{
        fontFamily: 'var(--font-serif)', fontSize: 13, letterSpacing: '0.32em',
        color: light ? 'rgba(245,242,238,0.7)' : 'var(--fg3)',
      }}>{jp}</div>}
    </div>
  );
}

// ============================================================
// Buttons
// ============================================================
function PrimaryButton({ children, onClick, full, type = 'button' }) {
  return (
    <button onClick={onClick} type={type}
      style={{
        background: 'var(--sonon-brown)', color: '#FFFFFF', border: 0,
        padding: '17px 40px',
        fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase',
        fontFamily: 'var(--font-sans)', cursor: 'pointer',
        borderRadius: 2,
        width: full ? '100%' : 'auto',
        transition: 'background 200ms var(--ease-out), transform 200ms var(--ease-out)',
      }}
      onMouseOver={(e) => e.currentTarget.style.background = 'var(--sonon-brown-500)'}
      onMouseOut={(e) => e.currentTarget.style.background = 'var(--sonon-brown)'}
      onMouseDown={(e) => e.currentTarget.style.transform = 'translateY(1px)'}
      onMouseUp={(e) => e.currentTarget.style.transform = 'translateY(0)'}
    >{children}</button>
  );
}

function SecondaryButton({ children, onClick, light = false }) {
  const fg = light ? '#F5F2EE' : 'var(--fg1)';
  const border = light ? 'rgba(245,242,238,0.5)' : 'var(--border)';
  return (
    <button onClick={onClick}
      style={{
        background: 'transparent', color: fg,
        padding: '16px 38px',
        fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase',
        fontFamily: 'var(--font-sans)', cursor: 'pointer',
        border: '1px solid ' + border,
        borderRadius: 2,
        transition: 'all 200ms var(--ease-out)',
      }}
      onMouseOver={(e) => {
        e.currentTarget.style.borderColor = light ? '#F5F2EE' : 'var(--accent)';
        e.currentTarget.style.color = light ? '#F5F2EE' : 'var(--accent)';
      }}
      onMouseOut={(e) => {
        e.currentTarget.style.borderColor = border;
        e.currentTarget.style.color = fg;
      }}
    >{children}</button>
  );
}

// ============================================================
// Eyebrow ornament — small ✶ with hairlines
// ============================================================
function Ornament({ light = false }) {
  const c = light ? 'rgba(245,242,238,0.4)' : 'var(--border)';
  const star = light ? 'var(--sonon-gold-soft)' : 'var(--sonon-gold)';
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      gap: 16, color: star, fontSize: 14, letterSpacing: '0.4em',
    }}>
      <span style={{ width: 56, height: 1, background: c }} />
      <span>✶</span>
      <span style={{ width: 56, height: 1, background: c }} />
    </div>
  );
}

Object.assign(window, {
  Header, SectionLabel, PrimaryButton, SecondaryButton, Ornament,
});