/* fungames — Shared layout: Nav + Footer + Marquee */

const NAV_ITEMS = [
  { id: 'home', label: 'Home' },
  { id: 'catalogue', label: 'Catalogue' },
  { id: 'engagement', label: 'Engagement' },
  { id: 'news', label: 'News' },
  { id: 'about', label: 'About' },
  { id: 'contact', label: 'Contact' },
];

function ChipMark({ size = 26, dark = false }) {
  // Inner-circle color & "s" color flip on dark backgrounds so the mark stays legible
  const ringInk = dark ? '#FBF6E9' : '#1A1714';
  const sColor = '#F7C948';
  return (
    <svg width={size} height={size} viewBox="0 0 96 96" fill="none" aria-hidden="true">
      <circle cx="48" cy="48" r="44" fill="#F7C948" />
      {Array.from({ length: 8 }).map((_, i) => {
        const a = (i * 45 + 22.5) * Math.PI / 180;
        const x1 = 48 + Math.cos(a) * 38;
        const y1 = 48 + Math.sin(a) * 38;
        const x2 = 48 + Math.cos(a) * 46;
        const y2 = 48 + Math.sin(a) * 46;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={ringInk} strokeWidth="6" strokeLinecap="round" />;
      })}
      <circle cx="48" cy="48" r="30" fill={ringInk} />
      <text x="48" y="63" textAnchor="middle" fontFamily="Bagel Fat One, cursive" fontSize="40" fill={sColor}>s</text>
    </svg>
  );
}

function Logo({ dark }) {
  return (
    <a className={`nav-logo ${dark ? 'nav-logo-dark' : ''}`} href="#home" onClick={(e)=>{e.preventDefault(); window.fgNavigate('home');}}>
      <ChipMark size={28} dark={dark} />
      <span className="nav-logo-text">simplegames<span className="dot-end">.fun</span></span>
    </a>
  );
}

function Nav({ active }) {
  const [hovered, setHovered] = React.useState(null);
  const FM = window.Motion || window.FramerMotion || {};
  const MotionDiv = FM.motion ? FM.motion.div : 'div';
  const MotionA = FM.motion ? FM.motion.a : 'a';
  const useMotion = !!FM.motion;

  return (
    <nav className="nav">
      <div className="nav-inner">
        <Logo />
        <div className="nav-links" onMouseLeave={() => setHovered(null)}>
          {NAV_ITEMS.map(n => {
            const isHovered = hovered === n.id;
            return (
              <a key={n.id}
                 className={active === n.id ? 'active' : ''}
                 href={`#${n.id}`}
                 onMouseEnter={() => setHovered(n.id)}
                 onClick={(e)=>{e.preventDefault(); window.fgNavigate(n.id);}}>
                {useMotion && isHovered && (
                  <MotionDiv
                    layoutId="nav-pill"
                    className="nav-link-pill"
                    style={{ left: 0, right: 0 }}
                    transition={{ type: 'spring', stiffness: 380, damping: 30 }}
                  />
                )}
                <span style={{ position: 'relative', zIndex: 1 }}>{n.label}</span>
              </a>
            );
          })}
        </div>
        <div className="nav-actions">
          <a className="btn btn-ghost" href="#" onClick={(e)=>e.preventDefault()}>API Docs</a>
          <a className="btn btn-primary btn-arrow" href="#" onClick={(e)=>{e.preventDefault(); window.fgNavigate('contact');}}>Onboard Games</a>
        </div>
      </div>
    </nav>
  );
}

function Marquee({ items, speed = 40 }) {
  const list = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track" style={{ animationDuration: `${speed}s` }}>
        {list.map((it, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, whiteSpace: 'nowrap' }}>
            <span className="dot" style={{ background: 'var(--rust)' }}></span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-2)' }}>{it}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer className="footer">
      {/* Big brand band — type-driven, aliimam-style */}
      <div className="footer-band">
        <div className="footer-band-inner">
          <div className="footer-band-copy">
            <span className="t-label" style={{ color: 'rgba(255,237,231,0.55)' }}>// Get in touch</span>
            <h2 className="footer-band-h">
              Build with the studio that <span className="footer-band-h-em">treats games as engineering</span>.
            </h2>
            <div className="row gap-sm mt-md" style={{ flexWrap: 'wrap' }}>
              <a href="#contact" onClick={(e)=>{e.preventDefault(); window.fgNavigate('contact');}} className="btn btn-primary">Talk to a partner manager</a>
              <a href="#catalogue" onClick={(e)=>{e.preventDefault(); window.fgNavigate('catalogue');}} className="btn btn-ghost-light">Explore catalogue</a>
            </div>
          </div>
          <div className="footer-band-meta">
            <div className="footer-band-meta-row">
              <span className="t-mono footer-band-meta-k">Email</span>
              <a className="t-mono footer-band-meta-v" href="mailto:partners@simplegames.fun">partners@simplegames.fun</a>
            </div>
            <div className="footer-band-meta-row">
              <span className="t-mono footer-band-meta-k">Studios</span>
              <span className="t-mono footer-band-meta-v">Bucharest · Tallinn · Buenos Aires</span>
            </div>
            <div className="footer-band-meta-row">
              <span className="t-mono footer-band-meta-k">Hours</span>
              <span className="t-mono footer-band-meta-v">Mon–Fri · 09:00–19:00 GMT+2</span>
            </div>
            <div className="footer-band-meta-row">
              <span className="t-mono footer-band-meta-k">Status</span>
              <span className="t-mono footer-band-meta-v" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <span className="dot dot-live"></span> All systems operational · 99.998%
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Link grid */}
      <div className="footer-inner">
        <div className="col gap-md">
          <Logo dark />
          <p className="t-body" style={{ maxWidth: 280, marginTop: 8, color: 'rgba(255,237,231,0.6)' }}>
            Architectural game engineering. Verifiably fair RNG, responsibly engineered, licensed in 14 jurisdictions.
          </p>
          <div className="footer-newsletter">
            <span className="t-label" style={{ color: 'rgba(255,237,231,0.5)' }}>// Field notes</span>
            <form onSubmit={(e)=>e.preventDefault()} className="footer-newsletter-form">
              <input type="email" placeholder="you@operator.com" aria-label="Email"/>
              <button type="submit" aria-label="Subscribe">→</button>
            </form>
            <span className="t-mono" style={{ fontSize: 10, color: 'rgba(255,237,231,0.4)' }}>One letter, monthly. No marketing.</span>
          </div>
        </div>
        <div>
          <h4>Studio</h4>
          <ul>
            <li><a href="#about" onClick={(e)=>{e.preventDefault(); window.fgNavigate('about');}}>About</a></li>
            <li><a href="#about" onClick={(e)=>{e.preventDefault(); window.fgNavigate('about');}}>Methodology</a></li>
            <li><a href="#about" onClick={(e)=>{e.preventDefault(); window.fgNavigate('about');}}>Careers</a></li>
            <li><a href="#news" onClick={(e)=>{e.preventDefault(); window.fgNavigate('news');}}>Press</a></li>
          </ul>
        </div>
        <div>
          <h4>Catalogue</h4>
          <ul>
            <li><a href="#catalogue" onClick={(e)=>{e.preventDefault(); window.fgNavigate('catalogue');}}>All Titles</a></li>
            <li><a href="#" onClick={(e)=>e.preventDefault()}>Crash Mechanics</a></li>
            <li><a href="#" onClick={(e)=>e.preventDefault()}>Grid Logic</a></li>
            <li><a href="#" onClick={(e)=>e.preventDefault()}>Card / Dice</a></li>
          </ul>
        </div>
        <div>
          <h4>Resources</h4>
          <ul>
            <li><a href="#" onClick={(e)=>e.preventDefault()}>API Docs</a></li>
            <li><a href="#" onClick={(e)=>e.preventDefault()}>RNG Certification</a></li>
            <li><a href="#engagement" onClick={(e)=>{e.preventDefault(); window.fgNavigate('engagement');}}>Engagement Tools</a></li>
            <li><a href="#" onClick={(e)=>e.preventDefault()}>Status</a></li>
          </ul>
        </div>
        <div>
          <h4>Legal</h4>
          <ul>
            <li><a href="#" onClick={(e)=>e.preventDefault()}>Licensing</a></li>
            <li><a href="#" onClick={(e)=>e.preventDefault()}>Responsible Gaming</a></li>
            <li><a href="#" onClick={(e)=>e.preventDefault()}>Operator Terms</a></li>
            <li><a href="#" onClick={(e)=>e.preventDefault()}>Privacy</a></li>
          </ul>
        </div>
      </div>

      {/* Giant logotype */}
      <div className="footer-wordmark" aria-hidden>
        <span>simplegames<span className="footer-wordmark-tld">.fun</span></span>
      </div>

      <div className="footer-bottom">
        <span className="t-mono">© 2026 simplegames.fun · precision built</span>
        <div className="footer-bottom-licenses">
          {['MGA','UKGC','ONJN','SIGA','ROMBET'].map(k => <span key={k} className="footer-license">{k}</span>)}
        </div>
        <span className="t-mono">v4.18.0 · build #1284</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Footer, Marquee, Logo, NAV_ITEMS });