// ============================================================================
// Reddy — Shared site components
// Nav, Footer, primitives, AssetFrame
// All exported to window.* for cross-script access.
// ============================================================================

const W = {
  green: '#01FBBC', greenHover: '#2CFFC9', greenDeep: '#00A87C', greenInk: '#04261D',
  ink900: '#03080A', ink850: '#04100D', ink800: '#061612', ink750: '#0A1C17', ink700: '#102A23',
  paper: '#FBFCFB', surface: '#FFFFFF', sunk: '#F4F7F5',
  line: '#E6EBE8', lineStrong: '#D3DAD6',
  ink: '#0A1512', ink2: '#46544E', ink3: '#6C7A74', ink4: '#9BA8A2',
  onDark1: '#F5F5F5', onDark2: 'rgba(245,245,245,0.70)', onDark3: 'rgba(245,245,245,0.50)', onDark4: 'rgba(245,245,245,0.30)',
  onDarkLine: 'rgba(245,245,245,0.10)', onDarkLine2: 'rgba(245,245,245,0.16)',
  sans: "'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif",
  mono: "'JetBrains Mono', ui-monospace, monospace"
};

function Icon({ name, size = 20, color, weight = 'regular', style: s = {} }) {
  const cls = weight === 'bold' ? 'ph-bold' : weight === 'fill' ? 'ph-fill' : 'ph';
  return <i className={`${cls} ph-${name}`} style={{ fontSize: size, color, lineHeight: 1, display: 'inline-flex', flexShrink: 0, ...s }} />;
}

function Container({ children, style: s = {} }) {
  return (
    <div style={{ maxWidth: 1248, margin: '0 auto', padding: '0 clamp(20px,4vw,48px)', ...s }}>
      {children}
    </div>);

}

function Eyebrow({ children, dark, noDot }) {
  const gradient = dark ?
  'linear-gradient(135deg, #9BFFE0 0%, #01FBBC 55%, #02C99B 100%)' :
  'linear-gradient(135deg, #02C99B 0%, #018B6F 100%)';
  const borderColor = dark ? 'rgba(245,245,245,0.24)' : 'rgba(0,0,0,0.18)';
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', marginBottom: 18, padding: '8px 18px', borderRadius: 999, border: `1px solid ${borderColor}`, background: 'transparent' }}>
      <span style={{ fontFamily: W.sans, fontSize: 13, fontWeight: 600, letterSpacing: '0.005em', backgroundImage: gradient, WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent', color: 'transparent' }}>{children}</span>
    </div>);

}

function GButton({ children, onClick, href, variant = 'primary', icon, big, dark, style: s = {} }) {
  const [h, setH] = React.useState(false);
  const [p, setP] = React.useState(false);
  const base = {
    height: big ? 54 : 46, borderRadius: 999, border: 'none', cursor: 'pointer',
    fontFamily: W.sans, fontSize: big ? 15.5 : 14, fontWeight: 600,
    padding: `0 ${big ? 30 : 22}px`,
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    transition: 'all 180ms cubic-bezier(0.16,1,0.3,1)',
    transform: p ? 'scale(0.97)' : 'none', whiteSpace: 'nowrap', textDecoration: 'none', flexShrink: 0, ...s
  };
  if (variant === 'primary') {
    Object.assign(base, {
      background: h ? 'linear-gradient(180deg,#52FFD8,#01E0A8)' : 'linear-gradient(180deg,#3BFFD0,#00CF97)',
      color: W.greenInk,
      boxShadow: h ?
      '0 1px 0 rgba(255,255,255,.55) inset, 0 10px 30px rgba(0,180,130,.40)' :
      '0 1px 0 rgba(255,255,255,.45) inset, 0 4px 18px rgba(0,180,130,.26)'
    });
  } else if (variant === 'ghost') {
    Object.assign(base, {
      background: h ? dark ? 'rgba(245,245,245,0.08)' : W.sunk : 'transparent',
      color: dark ? W.onDark1 : W.ink,
      boxShadow: `inset 0 0 0 1.5px ${dark ? 'rgba(245,245,245,0.24)' : W.lineStrong}`
    });
  } else if (variant === 'dark') {
    Object.assign(base, {
      background: h ? '#152E24' : '#0C2019',
      color: W.onDark1,
      boxShadow: `inset 0 0 0 1px ${W.onDarkLine2}`
    });
  }
  const evts = {
    onMouseEnter: () => setH(true), onMouseLeave: () => {setH(false);setP(false);},
    onMouseDown: () => setP(true), onMouseUp: () => setP(false)
  };
  const content = <>{children}{icon && <Icon name={icon} size={big ? 18 : 15} weight="bold" color="currentColor" />}</>;
  return href ?
  <a href={href} style={{ ...base, height: "46px" }} {...evts}>{content}</a> :
  <button style={base} onClick={onClick} {...evts}>{content}</button>;
}

function SectionHead({ eyebrow, title, sub, dark, center, noDotEyebrow, style: s = {} }) {
  return (
    <div style={{ textAlign: center ? 'center' : 'left', maxWidth: center ? 760 : 840, margin: center ? '0 auto' : 0, display: 'flex', flexDirection: 'column', alignItems: center ? 'center' : 'flex-start', ...s }}>
      {eyebrow && <Eyebrow dark={dark} noDot={noDotEyebrow}>{eyebrow}</Eyebrow>}
      <h2 style={{ margin: 0, fontFamily: W.sans, fontSize: 'clamp(28px,3.8vw,46px)', fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.06, color: dark ? W.onDark1 : W.ink, textWrap: 'balance', whiteSpace: 'pre-line' }}>{title}</h2>
      {sub && <p style={{ margin: '18px 0 0', fontFamily: W.sans, fontSize: 'clamp(15px,1.4vw,17.5px)', fontWeight: 400, lineHeight: 1.65, color: dark ? W.onDark2 : W.ink2, maxWidth: 620, textWrap: 'pretty' }}>{sub}</p>}
    </div>);

}

// Labeled placeholder for G## and S## assets not yet uploaded
function AssetFrame({ id, file, desc, height = 400, light = false, bgPhoto, style: s = {} }) {
  const bg = bgPhoto ? 'transparent' : light ? '#EEF2EF' : '#061612';
  const border = light ? 'rgba(1,251,188,0.25)' : 'rgba(1,251,188,0.14)';
  const idColor = light ? 'rgba(0,168,124,0.7)' : 'rgba(1,251,188,0.65)';
  const fileColor = light ? W.ink3 : 'rgba(245,245,245,0.38)';
  const descColor = light ? W.ink4 : 'rgba(245,245,245,0.22)';
  return (
    <div style={{ height, borderRadius: 16, position: 'relative', overflow: 'hidden', background: bg, backgroundImage: bgPhoto ? `url('${bgPhoto}')` : 'none', backgroundSize: 'cover', backgroundPosition: 'center', border: `1px solid ${border}`, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10, ...s }}>
      {!bgPhoto && <div style={{ position: 'absolute', inset: 0, opacity: 0.04, backgroundImage: 'radial-gradient(circle, #01FBBC 1px, transparent 1px)', backgroundSize: '28px 28px' }} />}
      <div style={{ position: 'absolute', top: 14, left: 14, display: 'flex', alignItems: 'center', gap: 6 }}>
        <span style={{ width: 5, height: 5, borderRadius: '50%', background: W.green, opacity: 0.7 }} />
        <span style={{ fontFamily: W.mono, fontSize: 10, color: light ? W.greenDeep : 'rgba(1,251,188,0.55)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Required asset</span>
      </div>
      <div style={{ fontFamily: W.mono, fontSize: 52, fontWeight: 700, color: idColor, lineHeight: 1, position: 'relative', zIndex: 1 }}>{id}</div>
      <div style={{ fontFamily: W.mono, fontSize: 11.5, color: fileColor, textAlign: 'center', maxWidth: '82%', position: 'relative', zIndex: 1 }}>{file}</div>
      {desc && <div style={{ fontFamily: W.sans, fontSize: 12.5, color: descColor, textAlign: 'center', maxWidth: '62%', lineHeight: 1.55, position: 'relative', zIndex: 1 }}>{desc}</div>}
    </div>);

}

// ── Nav ───────────────────────────────────────────────────────────────────
function Nav({ currentPage = 'home', dark = true }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [winW, setWinW] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1200);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 56);
    const onResize = () => setWinW(window.innerWidth);
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onResize, { passive: true });
    document.addEventListener('keydown', onKey);
    onScroll();
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onResize);
      document.removeEventListener('keydown', onKey);
    };
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const links = [
    { label: 'Students', href: 'students.html', key: 'students' },
    { label: 'Recruiters', href: 'recruiters.html', key: 'recruiters' },
    { label: 'Organizers', href: 'organizers.html', key: 'organizers' },
  ];

  const isLight = scrolled || !dark;
  const isMobile = winW <= 900;

  return (
    <>
      <nav style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 200, height: 68, transition: 'background 260ms ease, border-color 260ms ease', background: isLight ? 'rgba(251,252,251,0.94)' : 'transparent', backdropFilter: isLight ? 'blur(18px)' : 'none', WebkitBackdropFilter: isLight ? 'blur(18px)' : 'none', borderBottom: `1px solid ${isLight ? W.line : 'transparent'}` }}>
        <Container style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
          <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 9, textDecoration: 'none', flexShrink: 0 }}>
            <img src="assets/mark-green.png" alt="Reddy" style={{ height: 22 }} />
            <img src={isLight ? 'assets/wordmark-text-black.png' : 'assets/wordmark-text-white.png'} alt="REDDY" style={{ height: 14 }} />
          </a>

          {!isMobile && (
            <div style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
              {links.map((l) => (
                <a key={l.key} href={l.href} style={{ fontFamily: W.sans, fontSize: 14, fontWeight: 500, textDecoration: 'none', color: isLight ? W.ink2 : W.onDark2, borderBottom: `1.5px solid ${currentPage === l.key ? W.green : 'transparent'}`, paddingBottom: 2, transition: 'color 180ms' }}>
                  {l.label}
                </a>
              ))}
            </div>
          )}

          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            {!isMobile && <GButton href="/login" variant="ghost" dark={!isLight} style={{ height: 40, fontSize: 13.5 }}>Log in</GButton>}
            {!isMobile && <GButton href="/onboarding" variant="primary" style={{ height: 40, fontSize: 13.5 }}>Sign Up</GButton>}
            {isMobile && <GButton href="/onboarding" variant="primary" style={{ height: 38, fontSize: 13, padding: '0 18px' }}>Sign Up</GButton>}
            {isMobile && (
              <button
                onClick={() => setMenuOpen((o) => !o)}
                aria-label={menuOpen ? 'Close menu' : 'Open menu'}
                style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '6px 4px', display: 'flex', flexDirection: 'column', gap: 5, justifyContent: 'center', marginLeft: 4 }}
              >
                <span style={{ display: 'block', width: 22, height: 2, background: isLight ? W.ink : W.onDark1, borderRadius: 1, transition: 'transform 200ms, opacity 200ms', transform: menuOpen ? 'rotate(45deg) translate(4.5px, 4.5px)' : 'none' }} />
                <span style={{ display: 'block', width: 22, height: 2, background: isLight ? W.ink : W.onDark1, borderRadius: 1, transition: 'opacity 200ms', opacity: menuOpen ? 0 : 1 }} />
                <span style={{ display: 'block', width: 22, height: 2, background: isLight ? W.ink : W.onDark1, borderRadius: 1, transition: 'transform 200ms, opacity 200ms', transform: menuOpen ? 'rotate(-45deg) translate(4.5px, -4.5px)' : 'none' }} />
              </button>
            )}
          </div>
        </Container>
      </nav>

      {isMobile && menuOpen && (
        <div style={{ position: 'fixed', top: 68, left: 0, right: 0, bottom: 0, background: W.ink900, zIndex: 190, overflowY: 'auto' }}>
          <div style={{ padding: '24px 24px 60px' }}>
            {links.map((l) => (
              <a key={l.key} href={l.href} onClick={() => setMenuOpen(false)} style={{ display: 'block', padding: '18px 0', borderBottom: `1px solid ${W.onDarkLine}`, fontFamily: W.sans, fontSize: 20, fontWeight: 700, color: currentPage === l.key ? W.green : W.onDark1, textDecoration: 'none', letterSpacing: '-0.01em' }}>
                {l.label}
              </a>
            ))}
            <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <GButton href="/login" variant="ghost" dark style={{ height: 52, fontSize: 16, width: '100%', display: 'flex' }}>Log in</GButton>
              <GButton href="/onboarding" variant="primary" style={{ height: 52, fontSize: 16, width: '100%', display: 'flex' }}>Sign Up</GButton>
            </div>
          </div>
        </div>
      )}
    </>);

}

// ── Footer ────────────────────────────────────────────────────────────────
function Footer() {
  const cols = [
  { head: 'Students', links: [['Create your card', '#'], ['Your QR profile', '#'], ['Student privacy', '#']] },
  { head: 'Recruiters', links: [['Booth capture', '#'], ['Pipeline review', '#'], ['ATS export', '#']] },
  { head: 'Organizers', links: [['Event setup', '#'], ['Activity reporting', '#'], ['Proof packet', '#']] },
  { head: 'Company', links: [['About', '#'], ['Contact', '#'], ['Privacy', '#'], ['Terms', '#']] }];

  return (
    <footer style={{ background: W.ink850, borderTop: `1px solid ${W.onDarkLine}` }}>
      <Container style={{ paddingTop: 60, paddingBottom: 40 }}>
        <div className="footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.7fr 1fr 1fr 1fr 1fr', gap: 32 }}>
          <div>
            <a href="#" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, textDecoration: 'none', marginBottom: 14 }}>
              <img src="assets/mark-green.png" alt="Reddy" style={{ height: 22 }} />
              <img src="assets/wordmark-text-white.png" alt="REDDY" style={{ height: 14 }} />
            </a>
            <p style={{ margin: '0 0 24px', fontFamily: W.sans, fontSize: 13.5, lineHeight: 1.65, color: W.onDark3, maxWidth: 248 }}>The career fair operating system for students, recruiters, and organizers.</p>
          </div>
          {cols.map((c) =>
          <div key={c.head}>
              <div style={{ fontFamily: W.mono, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.09em', textTransform: 'uppercase', color: W.onDark4, marginBottom: 16 }}>{c.head}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {c.links.map(([l, h]) =>
              <a key={l} href={h} style={{ fontFamily: W.sans, fontSize: 14, color: W.onDark2, textDecoration: 'none' }}>{l}</a>
              )}
              </div>
            </div>
          )}
        </div>
        <div style={{ marginTop: 48, paddingTop: 24, borderTop: `1px solid ${W.onDarkLine}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
          <span style={{ fontFamily: W.sans, fontSize: 13, color: W.onDark4 }}>© 2026 Reddy. All rights reserved.</span>
          <div style={{ display: 'flex', gap: 20 }}>
            <Icon name="twitter-logo" size={17} color={W.onDark4} />
            <Icon name="linkedin-logo" size={17} color={W.onDark4} />
          </div>
        </div>
      </Container>
    </footer>);

}

// Proof chip row helper
function ProofRow({ items, dark }) {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 24px', marginTop: 28 }}>
      {items.map((item, i) =>
      <React.Fragment key={item}>
          <span style={{ fontFamily: W.mono, fontSize: 12, color: dark ? W.onDark3 : W.ink3 }}>{item}</span>
          {i < items.length - 1 && <span style={{ color: dark ? W.onDark4 : W.line, fontSize: 12 }}>·</span>}
        </React.Fragment>
      )}
    </div>);

}

Object.assign(window, { W, Icon, Container, Eyebrow, GButton, SectionHead, AssetFrame, Nav, Footer, ProofRow });