/* @jsx React.createElement */
/* Chrome: NavBar, TrustStrip, Footer */

function NavBar({ tweaks, setTweak }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [isMobile, setIsMobile] = React.useState(
    typeof window !== 'undefined' && window.innerWidth <= 768
  );
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    const onResize = () => {
      const mobile = window.innerWidth <= 768;
      setIsMobile(mobile);
      if (!mobile) setMenuOpen(false);
    };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const close = () => setMenuOpen(false);

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, height: 64, zIndex: 30,
      display: 'flex', alignItems: 'center', padding: '0 20px', gap: 16,
      background: isMobile
        ? 'var(--page-bg)'
        : ((scrolled || menuOpen) ? 'color-mix(in srgb, var(--page-bg) 90%, transparent)' : 'transparent'),
      backdropFilter: isMobile ? 'none' : ((scrolled || menuOpen) ? 'blur(12px) saturate(140%)' : 'none'),
      WebkitBackdropFilter: isMobile ? 'none' : ((scrolled || menuOpen) ? 'blur(12px) saturate(140%)' : 'none'),
      borderBottom: (isMobile || scrolled || menuOpen) ? '1px solid var(--page-border)' : '1px solid transparent',
      transition: 'all 200ms var(--ease-out)',
    }}>
      <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none', color: 'inherit' }}>
        <img src="assets/logos/ims.png" alt="" style={{ width: 38, height: 38, borderRadius: '50%' }} />
        <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1, gap: 3 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '0.01em', textTransform: 'uppercase' }}>INDIE Music</div>
          <div style={{ fontSize: 9.5, textTransform: 'uppercase', letterSpacing: 'var(--caps-lg)', fontWeight: 600, color: 'var(--page-ink-3)' }}>School &amp; Studio</div>
        </div>
      </a>
      <nav className="nav-desktop" style={{ display: isMobile ? 'none' : 'flex', gap: 24, marginLeft: 28, fontSize: 14, fontWeight: 500 }}>
        <a href="#programs" style={navLinkStyle}>Program</a>
        <a href="#method" style={navLinkStyle}>Metode</a>
        <a href="#teachers" style={navLinkStyle}>Guru</a>
        <a href="#studio" style={navLinkStyle}>Studio</a>
        <a href="#enroll" style={navLinkStyle}>Daftar</a>
      </nav>
      <div style={{ flex: 1 }} />
      <a className="nav-signin" href="https://member.indiespace.id" style={{ display: isMobile ? 'none' : 'inline-flex', fontSize: 13, fontWeight: 500, color: 'var(--page-ink-2)', textDecoration: 'none', alignItems: 'center', gap: 6 }}>
        Member sign in <span aria-hidden style={{ fontSize: 11 }}>↗</span>
      </a>
      <a href="#enroll" className="btn btn-primary nav-cta-trial" style={{ display: isMobile ? 'none' : 'inline-flex', fontSize: 14, padding: '11px 18px', boxShadow: '3px 3px 0 var(--page-ink)' }}>
        Coba kelas gratis
      </a>
      <button
        className="nav-mobile-toggle"
        onClick={() => setMenuOpen(o => !o)}
        aria-label={menuOpen ? 'Tutup menu' : 'Buka menu'}
        style={{
          display: isMobile ? 'inline-flex' : 'none',
          cursor: 'pointer',
          width: 40, height: 40, borderRadius: 6,
          alignItems: 'center', justifyContent: 'center',
          border: '1px solid var(--page-border-strong)',
          background: 'var(--page-surface)', color: 'var(--page-ink)',
          padding: 0,
        }}>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
          {menuOpen ? (<><path d="M6 6 L18 18" /><path d="M18 6 L6 18" /></>) : (<><path d="M4 7 L20 7" /><path d="M4 12 L20 12" /><path d="M4 17 L20 17" /></>)}
        </svg>
      </button>
      {isMobile && menuOpen && (
        <div style={{
          position: 'fixed', top: 64, left: 0, right: 0,
          background: 'var(--page-bg)',
          borderBottom: '1px solid var(--page-border)',
          padding: '16px 20px 24px',
          zIndex: 29,
          display: 'flex', flexDirection: 'column', gap: 4,
          boxShadow: '0 12px 24px -16px rgba(0,0,0,.18)',
        }}>
          <a href="#programs" onClick={close} style={mobileLinkStyle}>Program</a>
          <a href="#method" onClick={close} style={mobileLinkStyle}>Metode</a>
          <a href="#teachers" onClick={close} style={mobileLinkStyle}>Guru</a>
          <a href="#studio" onClick={close} style={mobileLinkStyle}>Studio</a>
          <a href="#enroll" onClick={close} style={mobileLinkStyle}>Daftar</a>
          <a href="#enroll" onClick={close} className="btn btn-primary" style={{ marginTop: 12, justifyContent: 'center', boxShadow: '3px 3px 0 var(--page-ink)' }}>
            Coba kelas gratis
          </a>
        </div>
      )}
    </header>
  );
}

const mobileLinkStyle = {
  padding: '14px 6px',
  fontSize: 16,
  fontWeight: 600,
  color: 'var(--page-ink)',
  textDecoration: 'none',
  borderBottom: '1px solid var(--page-border)',
};

const navLinkStyle = {
  color: 'var(--page-ink-2)',
  textDecoration: 'none',
  transition: 'color 200ms var(--ease-out)',
};

function TrustStrip() {
  const items = [
    'Guitar', '·', 'Piano', '·', 'Drum', '·', 'Bass', '·', 'Vocal',
    '·', 'Pre-Beginner → Performance 3',
    '·', 'Anak & Dewasa', '·', 'Private · Group · In-Home',
    '·', '6 Skill Dimensions', '·', '59 Stamps', '·', 'Parent Dashboard',
  ];
  const run = [...items, ...items];
  return (
    <div style={{
      borderTop: '1px solid var(--page-border)',
      borderBottom: '1px solid var(--page-border)',
      background: 'var(--page-surface)',
      overflow: 'hidden',
      padding: '18px 0',
    }}>
      <div style={{
        display: 'flex', gap: 28, whiteSpace: 'nowrap',
        animation: 'marquee 60s linear infinite',
        width: 'max-content',
      }}>
        {run.map((t, i) => (
          <span key={i} style={{
            fontSize: 13, fontWeight: t === '·' ? 700 : 600,
            color: t === '·' ? 'var(--accent-ims)' : 'var(--page-ink-2)',
            textTransform: t === '·' ? 'none' : 'uppercase',
            letterSpacing: t === '·' ? 0 : 'var(--caps-sm)',
          }}>{t}</span>
        ))}
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer style={{
      background: 'var(--indie-navy-900)',
      color: '#F4F1EA',
      padding: '80px 32px 36px',
      marginTop: 0,
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 40, alignItems: 'start' }} className="r-footer-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
              <img src="assets/logos/ims.png" alt="" style={{ width: 48, height: 48, borderRadius: '50%' }} />
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, letterSpacing: '0.01em', textTransform: 'uppercase', lineHeight: 1 }}>INDIE Music</div>
                <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: 'var(--caps-lg)', fontWeight: 600, color: '#9A968A', marginTop: 6 }}>School &amp; Studio</div>
              </div>
            </div>
            <p style={{ fontSize: 14, color: '#C9C6BC', maxWidth: 360, lineHeight: 1.65, margin: '0 0 22px' }}>
              Sekolah musik anti-mainstream di Gading Serpong. Belajar musik buat kamu rasanya kayak senang, bukan kewajiban. Guitar, piano, drum, bass, vocal — buat anak dan dewasa.
            </p>
            <div style={{ display: 'flex', gap: 8 }}>
              {['indiebrand', 'indiespace', 'indiekost', 'indiecafe'].map(b => (
                <img key={b} src={`assets/logos/${b}.png`} alt="" style={{ width: 30, height: 30, borderRadius: '50%', opacity: 0.85 }} />
              ))}
              <span style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 'var(--caps-sm)', color: '#9A968A', fontWeight: 600, alignSelf: 'center', marginLeft: 8 }}>Part of INDIE Group</span>
            </div>
          </div>
          <FooterCol title="Belajar" items={['Guitar', 'Piano', 'Drum', 'Bass', 'Vocal']} />
          <FooterCol title="Program" items={['Anak · Private', 'Anak · Group', 'Dewasa · Private', 'In-Home Private', 'Kelas trial']} />
          <FooterCol title="Studio" items={['Recording', 'Rehearsal', 'Booking by hour', 'Engineer in-house', 'Tour studio']} />
          <FooterCol title="Kontak" items={['+62 899-8267-999 (WA)', 'hello@indiemusic.id', 'Gading Serpong', 'Buka tiap hari 10–21']} />
        </div>
        <hr style={{ border: 0, borderTop: '1px solid #143559', margin: '52px 0 24px' }} />
        <div style={{ display: 'flex', gap: 18, fontSize: 12, color: '#9A968A', flexWrap: 'wrap', alignItems: 'center' }}>
          <span>© 2026 INDIE Music School &amp; Studio</span>
          <span>·</span>
          <span>Bagian dari <span style={{ color: '#F4F1EA', fontWeight: 600 }}>INDIE Group</span></span>
          <span>·</span>
          <span>Privasi</span>
          <span>·</span>
          <span>Syarat &amp; Ketentuan</span>
          <span style={{ flex: 1 }} />
          <span className="jp" style={{ color: '#9A968A' }}>音楽は、しあわせの始まり。</span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 'var(--caps-lg)', fontWeight: 600, color: '#9A968A', marginBottom: 14 }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 9 }}>
        {items.map(i => <li key={i} style={{ fontSize: 14, color: '#C9C6BC' }}>{i}</li>)}
      </ul>
    </div>
  );
}

Object.assign(window, { NavBar, TrustStrip, Footer });