// shared.jsx — NavBar, Footer, Stars, Badge, InstructorCard

// ── Mobile detection hook ───────────────────────────────────────────────
// All components that need different layouts on small screens read this.
// Breakpoint is 768px (the standard iPad-portrait threshold).
window.useIsMobile = (breakpoint = 768) => {
  const get = () => typeof window !== 'undefined' && window.innerWidth < breakpoint;
  const [isMobile, setIsMobile] = React.useState(get);
  React.useEffect(() => {
    const onResize = () => setIsMobile(get());
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, [breakpoint]);
  return isMobile;
};
const useIsMobile = window.useIsMobile;

const Stars = ({ rating, size = 14 }) => {
  const full = Math.floor(rating);
  const half = rating % 1 >= 0.5;
  const empty = 5 - full - (half ? 1 : 0);
  const starStyle = { width: size, height: size, display: 'inline-block' };
  return (
    <span style={{ display: 'inline-flex', gap: 2, alignItems: 'center' }}>
      {Array.from({ length: full }).map((_, i) => (
        <svg key={`f${i}`} style={starStyle} viewBox="0 0 16 16" fill="none">
          <path d="M8 1.5l1.8 3.7 4.1.6-3 2.9.7 4.1L8 10.8l-3.6 1.9.7-4.1-3-2.9 4.1-.6z" fill="oklch(72% 0.17 80)" />
        </svg>
      ))}
      {half && (
        <svg style={starStyle} viewBox="0 0 16 16" fill="none">
          <defs>
            <linearGradient id="half"><stop offset="50%" stopColor="oklch(72% 0.17 80)" /><stop offset="50%" stopColor="oklch(88% 0.015 60)" /></linearGradient>
          </defs>
          <path d="M8 1.5l1.8 3.7 4.1.6-3 2.9.7 4.1L8 10.8l-3.6 1.9.7-4.1-3-2.9 4.1-.6z" fill="url(#half)" />
        </svg>
      )}
      {Array.from({ length: empty }).map((_, i) => (
        <svg key={`e${i}`} style={starStyle} viewBox="0 0 16 16" fill="none">
          <path d="M8 1.5l1.8 3.7 4.1.6-3 2.9.7 4.1L8 10.8l-3.6 1.9.7-4.1-3-2.9 4.1-.6z" fill="oklch(88% 0.015 60)" />
        </svg>
      ))}
    </span>
  );
};

const Badge = ({ label }) => {
  const styles = {
    'Top Rated':       { bg: 'oklch(95% 0.12 80)',  color: 'oklch(42% 0.14 75)' },
    'Super Instructor':{ bg: 'oklch(92% 0.08 265)', color: 'oklch(32% 0.1 265)' },
    'Verified Pro':    { bg: 'oklch(93% 0.07 158)', color: 'oklch(32% 0.1 155)' },
  };
  const s = styles[label] || { bg: 'oklch(93% 0.01 265)', color: 'oklch(40% 0.04 265)' };
  return (
    <span style={{
      background: s.bg, color: s.color,
      fontSize: 11, fontWeight: 600, padding: '3px 8px',
      borderRadius: 20, letterSpacing: '0.02em', whiteSpace: 'nowrap',
    }}>{label}</span>
  );
};

const Avatar = ({ initials, hue, size = 52, src }) => {
  const [imgErr, setImgErr] = React.useState(false);
  if (src && !imgErr) {
    return (
      <div style={{ width: size, height: size, borderRadius: '50%', flexShrink: 0, overflow: 'hidden', background: `oklch(72% 0.12 ${hue})` }}>
        <img
          src={src}
          alt={initials}
          onError={() => setImgErr(true)}
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }}
        />
      </div>
    );
  }
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%', flexShrink: 0,
      background: `oklch(72% 0.12 ${hue})`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: "'Cormorant Garamond', serif",
      fontSize: size * 0.36, fontWeight: 600, color: 'white',
      letterSpacing: '0.05em', userSelect: 'none',
    }}>{initials}</div>
  );
};

const InstructorCard = ({ instructor: ins, viewMode = 'grid', onSelect }) => {
  const [hovered, setHovered] = React.useState(false);
  const isMobile = useIsMobile();
  const maskedName = window.MASTERY.maskTeacherName(ins.name);

  if (viewMode === 'list') {
    return (
      <div
        onClick={() => onSelect && onSelect(ins)}
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        style={{
          background: '#fff', borderRadius: 16,
          border: `1px solid ${hovered ? 'oklch(78% 0.06 265)' : 'oklch(90% 0.01 265)'}`,
          boxShadow: hovered ? '0 8px 32px oklch(15% 0.06 265 / 0.12)' : '0 2px 8px oklch(15% 0.06 265 / 0.06)',
          padding: isMobile ? '16px 18px' : '20px 24px', cursor: 'pointer',
          transition: 'all 0.22s ease',
          transform: hovered ? 'translateY(-1px)' : 'none',
          display: 'flex', gap: isMobile ? 14 : 20,
          alignItems: 'flex-start',
          flexDirection: isMobile ? 'column' : 'row',
        }}
      >
        <Avatar initials={ins.initials} hue={ins.hue} size={72} src={ins.avatarUrl} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                <span style={{ fontWeight: 700, fontSize: 17, color: 'oklch(18% 0.03 265)' }}>{maskedName}</span>
                {!ins.available && <span style={{ fontSize: 11, color: 'oklch(62% 0.04 265)', background: 'oklch(94% 0.01 265)', padding: '2px 8px', borderRadius: 20 }}>Waitlist</span>}
              </div>
              <div style={{ color: 'oklch(38% 0.06 265)', fontWeight: 600, fontSize: 14, marginTop: 2 }}>
                {ins.subject} · {ins.city}, {ins.state}
              </div>
            </div>
            <div style={{ textAlign: 'right', flexShrink: 0 }}>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 22, fontWeight: 700, color: 'oklch(22% 0.06 265)' }}>${ins.rate}<span style={{ fontSize: 13, fontWeight: 400 }}>/hr</span></div>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 6, flexWrap: 'wrap' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
              <Stars rating={ins.rating} size={13} />
              <span style={{ fontWeight: 700, fontSize: 13, color: 'oklch(22% 0.06 265)' }}>{ins.rating.toFixed(1)}</span>
              <span style={{ fontSize: 12, color: 'oklch(55% 0.03 265)' }}>({ins.reviewCount} reviews)</span>
            </span>
            <span style={{ fontSize: 12, color: 'oklch(55% 0.03 265)' }}>{ins.studentCount.toLocaleString()} students</span>
            <span style={{ fontSize: 12, color: 'oklch(55% 0.03 265)' }}>{ins.experience} yrs exp</span>
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
            {ins.badges.map(b => <Badge key={b} label={b} />)}
          </div>
          <p style={{ fontSize: 13, color: 'oklch(45% 0.03 265)', lineHeight: 1.6, marginTop: 8,
            display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
            {ins.bio}
          </p>
        </div>
        <div style={{
          display: 'flex',
          flexDirection: isMobile ? 'row' : 'column',
          gap: 8, flexShrink: 0,
          width: isMobile ? '100%' : 'auto',
        }}>
          <button
            onClick={e => { e.stopPropagation(); onSelect && onSelect(ins); }}
            style={{
              background: 'oklch(22% 0.06 265)', color: '#fff',
              border: 'none', borderRadius: 10, padding: '10px 20px',
              fontWeight: 600, fontSize: 13, cursor: 'pointer', whiteSpace: 'nowrap',
              transition: 'background 0.15s', flex: isMobile ? 1 : 'none',
              fontFamily: "'Plus Jakarta Sans', sans-serif",
            }}>Book Trial</button>
          <button
            onClick={e => { e.stopPropagation(); onSelect && onSelect(ins); }}
            style={{
              background: 'transparent', color: 'oklch(22% 0.06 265)',
              border: '1.5px solid oklch(82% 0.04 265)', borderRadius: 10,
              padding: '9px 20px', fontWeight: 600, fontSize: 13,
              cursor: 'pointer', whiteSpace: 'nowrap', transition: 'border-color 0.15s',
              flex: isMobile ? 1 : 'none', fontFamily: "'Plus Jakarta Sans', sans-serif",
            }}>View Profile</button>
        </div>
      </div>
    );
  }

  // Grid card — photo-first layout (Preply/Wyzant style)
  return (
    <div
      onClick={() => onSelect && onSelect(ins)}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: '#fff', borderRadius: 18,
        border: `1px solid ${hovered ? 'oklch(78% 0.06 265)' : 'oklch(91% 0.01 265)'}`,
        boxShadow: hovered ? '0 16px 48px oklch(15% 0.06 265 / 0.16)' : '0 2px 10px oklch(15% 0.06 265 / 0.07)',
        cursor: 'pointer', transition: 'all 0.22s ease',
        transform: hovered ? 'translateY(-4px)' : 'none',
        display: 'flex', flexDirection: 'column', overflow: 'hidden',
      }}
    >
      {/* Photo strip — tall, cropped at top */}
      <div style={{ position: 'relative', height: 200, background: `oklch(72% 0.12 ${ins.hue})`, overflow: 'hidden', flexShrink: 0 }}>
        {ins.avatarUrl ? (
          <img
            src={ins.avatarUrl}
            alt={maskedName}
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }}
            onError={e => { e.target.style.display = 'none'; }}
          />
        ) : (
          <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'Cormorant Garamond', serif", fontSize: 52, fontWeight: 700, color: 'rgba(255,255,255,0.85)', letterSpacing: '0.05em' }}>
            {ins.initials}
          </div>
        )}
        {/* Availability badge */}
        {!ins.available && (
          <span style={{ position: 'absolute', top: 12, right: 12, fontSize: 11, color: 'oklch(22% 0.06 265)', background: 'rgba(255,255,255,0.92)', padding: '4px 10px', borderRadius: 20, fontWeight: 600, backdropFilter: 'blur(4px)' }}>Waitlist</span>
        )}
        {/* Price badge — bottom left */}
        <div style={{ position: 'absolute', bottom: 12, left: 12, background: 'rgba(255,255,255,0.94)', backdropFilter: 'blur(6px)', borderRadius: 10, padding: '5px 12px' }}>
          <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 18, fontWeight: 700, color: 'oklch(22% 0.06 265)' }}>${ins.rate}</span>
          <span style={{ fontSize: 11, color: 'oklch(48% 0.03 265)', fontWeight: 500 }}>/hr</span>
        </div>
        {/* Rating badge — bottom right */}
        <div style={{ position: 'absolute', bottom: 12, right: 12, background: 'rgba(255,255,255,0.94)', backdropFilter: 'blur(6px)', borderRadius: 10, padding: '5px 10px', display: 'flex', alignItems: 'center', gap: 5 }}>
          <svg style={{ width: 12, height: 12, flexShrink: 0 }} viewBox="0 0 16 16" fill="oklch(72% 0.17 80)">
            <path d="M8 1.5l1.8 3.7 4.1.6-3 2.9.7 4.1L8 10.8l-3.6 1.9.7-4.1-3-2.9 4.1-.6z" />
          </svg>
          <span style={{ fontSize: 13, fontWeight: 700, color: 'oklch(22% 0.06 265)' }}>{ins.rating.toFixed(1)}</span>
        </div>
      </div>

      {/* Card body */}
      <div style={{ padding: '16px 18px 18px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        {/* Name + subject */}
        <div style={{ fontWeight: 700, fontSize: 16, color: 'oklch(18% 0.03 265)', lineHeight: 1.2 }}>{maskedName}</div>
        <div style={{ color: 'oklch(38% 0.06 265)', fontWeight: 600, fontSize: 13, marginTop: 3 }}>{ins.subject}</div>
        <div style={{ fontSize: 12, color: 'oklch(58% 0.03 265)', marginTop: 1 }}>{ins.city}, {ins.state}</div>

        {/* Stats row */}
        <div style={{ display: 'flex', gap: 14, marginTop: 10, paddingTop: 10, borderTop: '1px solid oklch(93% 0.01 265)' }}>
          <div>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'oklch(22% 0.06 265)' }}>{ins.reviewCount}</div>
            <div style={{ fontSize: 11, color: 'oklch(58% 0.03 265)' }}>reviews</div>
          </div>
          <div>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'oklch(22% 0.06 265)' }}>{ins.studentCount.toLocaleString()}</div>
            <div style={{ fontSize: 11, color: 'oklch(58% 0.03 265)' }}>students</div>
          </div>
          <div>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'oklch(22% 0.06 265)' }}>{ins.experience} yrs</div>
            <div style={{ fontSize: 11, color: 'oklch(58% 0.03 265)' }}>experience</div>
          </div>
        </div>

        {/* Badges */}
        {ins.badges.length > 0 && (
          <div style={{ display: 'flex', gap: 5, marginTop: 10, flexWrap: 'wrap' }}>
            {ins.badges.map(b => <Badge key={b} label={b} />)}
          </div>
        )}

        {/* Bio */}
        <p style={{
          fontSize: 13, color: 'oklch(48% 0.03 265)', lineHeight: 1.6, marginTop: 10,
          display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden',
          flex: 1,
        }}>{ins.bio}</p>

        {/* Specialties */}
        {ins.specialties.length > 0 && (
          <div style={{ display: 'flex', gap: 5, marginTop: 10, flexWrap: 'wrap' }}>
            {ins.specialties.slice(0, 3).map(s => (
              <span key={s} style={{ fontSize: 11, color: 'oklch(42% 0.04 265)', background: 'oklch(96% 0.01 265)', padding: '3px 8px', borderRadius: 20 }}>{s}</span>
            ))}
          </div>
        )}

        {/* CTA */}
        <button
          onClick={e => { e.stopPropagation(); onSelect && onSelect(ins); }}
          style={{
            marginTop: 14, width: '100%',
            background: hovered ? 'oklch(18% 0.07 265)' : 'oklch(22% 0.06 265)',
            color: '#fff', border: 'none', borderRadius: 10, padding: '11px 0',
            fontWeight: 600, fontSize: 13, cursor: 'pointer',
            transition: 'background 0.15s', fontFamily: "'Plus Jakarta Sans', sans-serif",
          }}>Book a free trial lesson</button>
      </div>
    </div>
  );
};

// NavBar — desktop shows logo + center nav + CTAs; mobile shows logo +
// hamburger drawer that slides down with all nav links + auth CTAs.
const NavBar = ({ page, setPage, scrolled, openAuth, openBecomeInstructor }) => {
  const auth = window.useAuth();
  const isMobile = useIsMobile();
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [drawerOpen, setDrawerOpen] = React.useState(false);
  React.useEffect(() => {
    const close = () => setMenuOpen(false);
    if (menuOpen) window.addEventListener('click', close);
    return () => window.removeEventListener('click', close);
  }, [menuOpen]);
  // Close the drawer whenever we route to a new page
  React.useEffect(() => { setDrawerOpen(false); }, [page]);
  const isTransparent = page === 'home' && !scrolled && !drawerOpen;

  // "Find Instructors" is gated on the public flag — hidden in invite-only mode.
  const navItems = [
    ...(window.FEATURES?.publicInstructors ? [{ label: 'Find Instructors', onClick: () => setPage('instructors') }] : []),
    { label: 'How It Works',     onClick: () => setPage('how-it-works') },
    { label: 'For Instructors',  onClick: () => openBecomeInstructor && openBecomeInstructor() },
  ];

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: isTransparent ? 'transparent' : 'rgba(255,255,255,0.96)',
      backdropFilter: isTransparent ? 'none' : 'blur(16px)',
      borderBottom: isTransparent ? 'none' : '1px solid oklch(90% 0.01 265)',
      boxShadow: isTransparent ? 'none' : '0 2px 20px oklch(15% 0.06 265 / 0.08)',
      transition: 'all 0.35s ease',
      padding: isMobile ? '0 18px' : '0 40px',
      height: isMobile ? 60 : 68,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      {/* Logo */}
      <button onClick={() => setPage('home')} style={{
        fontFamily: "'Cormorant Garamond', serif",
        fontSize: isMobile ? 22 : 26, fontWeight: 700,
        color: isTransparent ? '#fff' : 'oklch(22% 0.06 265)',
        letterSpacing: '0.12em', background: 'none', border: 'none',
        cursor: 'pointer', transition: 'color 0.35s',
      }}>COACHING</button>

      {/* Desktop center nav (hidden on mobile) */}
      {!isMobile && (
        <div style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
          {navItems.map(item => (
            <button key={item.label} onClick={item.onClick}
              style={{
                background: 'none', border: 'none', cursor: 'pointer',
                fontSize: 14, fontWeight: 500,
                color: isTransparent ? 'rgba(255,255,255,0.82)' : 'oklch(42% 0.04 265)',
                transition: 'color 0.2s',
                fontFamily: "'Plus Jakarta Sans', sans-serif",
              }}>{item.label}</button>
          ))}
        </div>
      )}

      {/* Right side */}
      {isMobile ? (
        // Mobile: just a hamburger button. Everything else lives in the drawer below.
        <button
          aria-label="Open menu"
          onClick={() => setDrawerOpen(o => !o)}
          style={{
            width: 44, height: 44, borderRadius: 10, border: 'none',
            background: isTransparent ? 'rgba(255,255,255,0.12)' : 'oklch(96% 0.01 265)',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4,
            cursor: 'pointer', padding: 0,
          }}
        >
          {[0,1,2].map(i => (
            <span key={i} style={{
              width: 18, height: 2, borderRadius: 1,
              background: isTransparent ? '#fff' : 'oklch(28% 0.05 265)',
              transition: 'transform 0.2s, opacity 0.2s',
              transform: drawerOpen ? (i === 0 ? 'translateY(6px) rotate(45deg)' : i === 2 ? 'translateY(-6px) rotate(-45deg)' : 'none') : 'none',
              opacity: drawerOpen && i === 1 ? 0 : 1,
            }} />
          ))}
        </button>
      ) : (
        // Desktop: Log In / Get Started or signed-in account dropdown
        <div style={{ display: 'flex', gap: 12, alignItems: 'center', position: 'relative' }}>
          {auth.user ? (
            <>
              <button onClick={() => setPage(auth.isAdmin ? 'admin' : 'dashboard')} style={{
                background: 'none', border: 'none', cursor: 'pointer',
                fontSize: 14, fontWeight: 500,
                color: isTransparent ? 'rgba(255,255,255,0.82)' : 'oklch(42% 0.04 265)',
                fontFamily: "'Plus Jakarta Sans', sans-serif",
              }}>{auth.isAdmin ? 'Admin' : 'Dashboard'}</button>
              <button onClick={(e) => { e.stopPropagation(); setMenuOpen(o => !o); }} style={{
                padding: 0, background: 'none', border: 'none', cursor: 'pointer',
              }}>
                <Avatar
                  initials={auth.profile?.avatar_initials || (auth.isAdmin ? 'A' : '??')}
                  hue={auth.profile?.hue || 220}
                  size={38}
                />
              </button>
              {menuOpen && (
                <div onClick={e => e.stopPropagation()} style={{
                  position: 'absolute', top: 50, right: 0, background: '#fff',
                  borderRadius: 12, boxShadow: '0 12px 40px rgba(0,0,0,0.18)',
                  padding: 8, minWidth: 200, border: '1px solid oklch(92% 0.01 265)', zIndex: 200,
                }}>
                  <div style={{ padding: '10px 14px', borderBottom: '1px solid oklch(94% 0.01 265)', marginBottom: 4 }}>
                    <div style={{ fontWeight: 600, fontSize: 14, color: 'oklch(22% 0.06 265)' }}>{auth.profile?.full_name || (auth.isAdmin ? 'Admin' : 'Account')}</div>
                    <div style={{ fontSize: 12, color: 'oklch(55% 0.03 265)', textTransform: 'capitalize' }}>{auth.isAdmin ? 'admin' : (auth.profile?.role || '')}</div>
                  </div>
                  <MenuItem onClick={() => { setMenuOpen(false); setPage(auth.isAdmin ? 'admin' : 'dashboard'); }}>{auth.isAdmin ? 'Admin panel' : 'My dashboard'}</MenuItem>
                  {auth.profile?.role === 'instructor' && (
                    <MenuItem onClick={() => { setMenuOpen(false); setPage('dashboard'); }}>My availability</MenuItem>
                  )}
                  <MenuItem onClick={async () => { setMenuOpen(false); await window.AUTH.signOut(); setPage('home'); }}>Sign out</MenuItem>
                </div>
              )}
            </>
          ) : (
            <>
              <button onClick={() => setPage('dashboard')} style={{
                background: 'none', border: 'none', cursor: 'pointer',
                fontSize: 14, fontWeight: 500,
                color: isTransparent ? 'rgba(255,255,255,0.82)' : 'oklch(42% 0.04 265)',
                fontFamily: "'Plus Jakarta Sans', sans-serif",
              }}>Log In</button>
              {/* Get Started → new-student onboarding wizard (not the login page).
                  Joe specifically wanted unknown visitors to land on the
                  step-by-step intake, not the magic-link form. */}
              <button onClick={() => setPage('student-onboarding')} style={{
                background: isTransparent ? 'rgba(255,255,255,0.15)' : 'oklch(22% 0.06 265)',
                color: '#fff', border: isTransparent ? '1.5px solid rgba(255,255,255,0.4)' : 'none',
                borderRadius: 10, padding: '9px 22px',
                fontSize: 14, fontWeight: 600, cursor: 'pointer',
                transition: 'all 0.2s', fontFamily: "'Plus Jakarta Sans', sans-serif",
                backdropFilter: isTransparent ? 'blur(8px)' : 'none',
              }}>Get Started</button>
            </>
          )}
        </div>
      )}

      {/* Mobile drawer (slides down from under the nav) */}
      {isMobile && drawerOpen && (
        <div style={{
          position: 'fixed', top: 60, left: 0, right: 0,
          background: '#fff', borderBottom: '1px solid oklch(90% 0.01 265)',
          boxShadow: '0 12px 32px rgba(0,0,0,0.12)',
          padding: '12px 0 16px', zIndex: 99,
          display: 'flex', flexDirection: 'column',
        }}>
          {navItems.map(item => (
            <button key={item.label} onClick={() => { item.onClick(); setDrawerOpen(false); }}
              style={{
                background: 'none', border: 'none', cursor: 'pointer',
                fontSize: 16, fontWeight: 500, color: 'oklch(28% 0.05 265)',
                fontFamily: "'Plus Jakarta Sans', sans-serif",
                padding: '14px 20px', textAlign: 'left',
              }}>{item.label}</button>
          ))}
          <div style={{ height: 1, background: 'oklch(94% 0.01 265)', margin: '8px 20px' }} />
          {auth.user ? (
            <>
              <div style={{ padding: '8px 20px 4px' }}>
                <div style={{ fontWeight: 600, fontSize: 14, color: 'oklch(22% 0.06 265)' }}>{auth.profile?.full_name || 'Account'}</div>
                <div style={{ fontSize: 12, color: 'oklch(55% 0.03 265)', textTransform: 'capitalize' }}>{auth.profile?.role || ''}</div>
              </div>
              <button onClick={() => { setPage('dashboard'); setDrawerOpen(false); }}
                style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 16, color: 'oklch(28% 0.05 265)', fontFamily: "'Plus Jakarta Sans', sans-serif", padding: '12px 20px', textAlign: 'left' }}>
                My dashboard
              </button>
              <button onClick={async () => { await window.AUTH.signOut(); setPage('home'); setDrawerOpen(false); }}
                style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 16, color: 'oklch(40% 0.18 25)', fontFamily: "'Plus Jakarta Sans', sans-serif", padding: '12px 20px', textAlign: 'left' }}>
                Sign out
              </button>
            </>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: '8px 20px 4px' }}>
              <button onClick={() => { setPage('dashboard'); setDrawerOpen(false); }}
                style={{ background: 'oklch(96% 0.01 265)', border: '1px solid oklch(88% 0.02 265)', borderRadius: 10, padding: '12px 0', fontSize: 15, fontWeight: 600, color: 'oklch(28% 0.05 265)', cursor: 'pointer', fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                Log In
              </button>
              <button onClick={() => { setPage('student-onboarding'); setDrawerOpen(false); }}
                style={{ background: 'oklch(22% 0.06 265)', color: '#fff', border: 'none', borderRadius: 10, padding: '13px 0', fontSize: 15, fontWeight: 700, cursor: 'pointer', fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                Get Started
              </button>
            </div>
          )}
        </div>
      )}
    </nav>
  );
};

const MenuItem = ({ onClick, children }) => (
  <button onClick={onClick} style={{
    display: 'block', width: '100%', textAlign: 'left',
    background: 'none', border: 'none', cursor: 'pointer',
    padding: '9px 14px', borderRadius: 8, fontSize: 14,
    color: 'oklch(28% 0.04 265)', fontFamily: "'Plus Jakarta Sans', sans-serif",
  }}
    onMouseEnter={e => e.currentTarget.style.background = 'oklch(96% 0.01 265)'}
    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
  >{children}</button>
);

// Footer — desktop is 2fr 1fr 1fr 1fr, mobile stacks to a single column.
const Footer = ({ setPage, openBecomeInstructor }) => {
  const isMobile = useIsMobile();
  const goInstructors = () => setPage('instructors');
  // "Find Lessons" column is gated — hidden in invite-only mode.
  const cols = [
    ...(window.FEATURES?.publicInstructors ? [{ title: 'Find Lessons', links: [
      ['Browse Instructors',     goInstructors],
      ['Music Lessons',          goInstructors],
      ['Visual Arts',            goInstructors],
      ['Sports & Fitness',       goInstructors],
      ['Theater & Performance',  goInstructors],
    ]}] : []),
    { title: 'Company', links: [
      ['About Coaching',  () => setPage('how-it-works')],
      ['Our Mission',    () => setPage('how-it-works')],
    ]},
    { title: 'Support', links: [
      ['How It Works',          () => setPage('how-it-works')],
      ['Become an Instructor',  () => openBecomeInstructor && openBecomeInstructor()],
    ]},
  ];
  return (
  <footer style={{ background: 'oklch(18% 0.06 265)', color: 'rgba(255,255,255,0.65)', padding: isMobile ? '48px 22px 28px' : '72px 80px 40px' }}>
    <div style={{
      display: 'grid',
      gridTemplateColumns: isMobile ? '1fr' : '2fr 1fr 1fr 1fr',
      gap: isMobile ? 32 : 48,
      marginBottom: isMobile ? 36 : 60,
    }}>
      <div>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: isMobile ? 24 : 28, fontWeight: 700, color: '#fff', letterSpacing: '0.12em', marginBottom: 14 }}>COACHING</div>
        <p style={{ fontSize: 14, lineHeight: 1.75, maxWidth: 320 }}>Premium private lessons in music, arts, sports, and performance. Find your perfect instructor — wherever you are in America.</p>
        <div style={{ display: 'flex', gap: 12, marginTop: 20 }}>
          {['f','t','in','ig'].map(s => (
            <div key={s} style={{ width: 36, height: 36, borderRadius: 8, background: 'rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>{s}</div>
          ))}
        </div>
      </div>
      {cols.map(col => (
        <div key={col.title}>
          <div style={{ fontWeight: 600, color: '#fff', fontSize: 13, marginBottom: 14, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{col.title}</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {col.links.map(([label, onClick]) => (
              <button key={label} onClick={onClick}
                style={{ background: 'none', border: 'none', color: 'rgba(255,255,255,0.55)', fontSize: 14, cursor: 'pointer', textAlign: 'left', padding: 0, fontFamily: "'Plus Jakarta Sans', sans-serif", transition: 'color 0.15s' }}
                onMouseEnter={e => e.target.style.color = 'oklch(72% 0.17 80)'}
                onMouseLeave={e => e.target.style.color = 'rgba(255,255,255,0.55)'}
              >{label}</button>
            ))}
          </div>
        </div>
      ))}
    </div>
    <div style={{ borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'center', flexWrap: 'wrap', gap: 12, flexDirection: isMobile ? 'column' : 'row' }}>
      <span style={{ fontSize: 13 }}>© 2026 Coaching Inc. All rights reserved.</span>
      <div style={{ display: 'flex', gap: isMobile ? 14 : 24, alignItems: 'center', flexWrap: 'wrap' }}>
        {[
          ['Privacy Policy', 'privacy'],
          ['Terms of Service', 'terms'],
          ['Cookie Policy', 'cookies'],
        ].map(([label, slug]) => (
          <button key={slug} onClick={() => setPage(slug)}
            style={{ background: 'none', border: 'none', color: 'rgba(255,255,255,0.45)', fontSize: 13, cursor: 'pointer', fontFamily: "'Plus Jakarta Sans', sans-serif", padding: 0 }}>
            {label}
          </button>
        ))}
        {/* Admin link removed from public footer — admins reach the panel via
            #admin in the URL or via a saved bookmark. This keeps the staff
            entry point out of customer-facing screenshots/press. */}
      </div>
    </div>
  </footer>
  );
};

Object.assign(window, { Stars, Badge, Avatar, InstructorCard, NavBar, Footer });