// footer.jsx
const FOOTER_NAV_STUDIO = [
{ id: 'onas', label: 'O nás', kicker: '01' },
{ id: 'kariera', label: 'Kariéra', kicker: '02' },
{ id: 'knowhub', label: 'Knowhub', kicker: '03' },
{ id: 'justask', label: 'Justask', kicker: '04' }];

const FOOTER_NAV_WORK = [
{ id: 'projekty', label: 'Projekty', kicker: '05' },
{ id: 'sluzby', label: 'Služby', kicker: '06' },
{ id: 'kontakt', label: 'Kontakt', kicker: '07' }];


const FOOTER_SOCIALS = [
{ id: 'ig', label: 'Instagram', href: 'https://www.instagram.com/justmightyagency/', handle: '@justmightyagency',
  icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.2" cy="6.8" r=".9" fill="currentColor" stroke="none" /></svg> },
{ id: 'fb', label: 'Facebook', href: 'https://www.facebook.com/JustmightyAgency', handle: '/JustmightyAgency',
  icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M14 8h3V4h-3a4 4 0 0 0-4 4v2H7v4h3v8h4v-8h3l1-4h-4V8.5a.5.5 0 0 1 .5-.5z" /></svg> },
{ id: 'yt', label: 'YouTube', href: 'https://www.youtube.com/channel/UCO43Jj9RIPZB8Mzf4_1QF_g', handle: '@justmighty',
  icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="2.5" y="5.5" width="19" height="13" rx="3.5" /><path d="M10.5 9.5v5l4.5-2.5z" fill="currentColor" stroke="none" /></svg> },
{ id: 'tt', label: 'TikTok', href: 'https://www.tiktok.com/@justmighty', handle: '@justmighty',
  icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M14 4v10.5a3 3 0 1 1-3-3" /><path d="M14 4c.5 2.5 2.5 4.5 5 5" /></svg> },
{ id: 'sp', label: 'Spotify', href: 'https://open.spotify.com/show/0kD92MeXyAR0LLejEolETp', handle: 'Justmighty Podcast',
  icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="9" /><path d="M7 10c3-1 8-1 11 1" /><path d="M7.5 13.5c2.5-.8 6.5-.5 9 1" /><path d="M8 16.5c2-.6 5-.4 7 .8" /></svg> },
{ id: 'in', label: 'LinkedIn', href: 'https://www.linkedin.com/company/justmighty', handle: '/justmighty',
  icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="18" height="18" rx="3" /><path d="M8 10v7M8 7.2v.1M12 17v-4a2 2 0 0 1 4 0v4M12 10v7" /></svg> }];


function FooterNavLink({ item }) {
  return (
    <a href={`#${item.id}`} className="footer__navlink"
    onClick={(e) => {e.preventDefault();window.__appNav && window.__appNav(item.id);}}>
      <span className="footer__navlink-num mono">{item.kicker}</span>
      <span className="footer__navlink-label">{item.label}</span>
      <span className="footer__navlink-arrow" aria-hidden="true">→</span>
    </a>);

}

function Footer() {
  return (
    <footer className="footer" data-screen-label="08 Footer">
      <div className="shell" style={{ padding: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap' }}>
          <span className="eyebrow">— do příště</span>
          <span className="mono" style={{ color: 'var(--muted)', fontSize: 12 }}>BRNO / PRAHA / ONLINE</span>
        </div>
        <div className="footer__big">Justmighty.</div>

        <div className="footer__news">
          <div className="footer__news-text">
            <h4>nech si poslat <em>pár věcí měsíčně</em></h4>
            <p>Knowhub newsletter — jednou měsíčně shrnutí webinářů, školení a článků. Bez balastu, dá se odhlásit kdykoli.</p>
          </div>
          <form className="footer__news-form" onSubmit={(e) => {e.preventDefault();const i = e.target.querySelector('input');if (i.value) {i.value = '';e.target.querySelector('button').textContent = '✓ přihlášeno';}}}>
            <input type="email" required placeholder="tvoje@email.cz" className="footer__news-input" aria-label="E-mail" />
            <button type="submit" className="footer__news-btn">přihlásit se →</button>
          </form>
        </div>

        <div className="footer__main">
          <div className="footer__nav">
            <div className="footer__nav-col">
              <h5>Práce</h5>
              <div className="footer__nav-list">
                {FOOTER_NAV_WORK.map((it) => <FooterNavLink key={it.id} item={it} />)}
              </div>
            </div>
            <div className="footer__nav-col">
              <h5>Studio</h5>
              <div className="footer__nav-list">
                {FOOTER_NAV_STUDIO.map((it) => <FooterNavLink key={it.id} item={it} />)}
              </div>
            </div>
            <div className="footer__nav-col">
              <h5>Stačí napsat</h5>
              <a className="footer__contact-line" href="mailto:hello@justmighty.cz">
                <span className="mono footer__contact-kicker">e-mail</span>
                <span className="footer__contact-val">hello@justmighty.cz</span>
              </a>
              <a className="footer__contact-line" href="tel:+420720316570">
                <span className="mono footer__contact-kicker">telefon</span>
                <span className="footer__contact-val">+420 720 316 570</span>
              </a>
              <p className="footer__contact-addr">
                Palackého třída 291/51<br />
                612 00 Brno · ČR
              </p>
            </div>
          </div>

          <div className="footer__socials">
            <div className="footer__socials-head">
              <span className="mono footer__socials-kicker">● Sleduj nás</span>
              <span className="footer__socials-meta">6 míst, kde nás potkáš</span>
            </div>
            <ul className="footer__socials-list">
              {FOOTER_SOCIALS.map((s) =>
              <li key={s.id}>
                  <a href={s.href} target="_blank" rel="noreferrer" aria-label={s.label}>
                    <span className="footer__social-icon">{s.icon}</span>
                    <span className="footer__social-body">
                      <span className="footer__social-label">{s.label}</span>
                      <span className="footer__social-handle">{s.handle}</span>
                    </span>
                    <span className="footer__social-arrow" aria-hidden="true">↗</span>
                  </a>
                </li>
              )}
            </ul>
          </div>
        </div>

        <div className="footer__bot">
          <div className="footer__bot-legal">
            <a href="#cookies" onClick={(e) => e.preventDefault()}>Cookies</a>
            <span className="footer__bot-sep" aria-hidden="true">/</span>
            <a href="#gdpr" onClick={(e) => e.preventDefault()}>Zpracování osobních údajů</a>
            <span className="footer__bot-sep" aria-hidden="true">/</span>
            <span>Copyright © 2026 Justmighty s.r.o.</span>
          </div>
          <span className="mono footer__bot-build">Vytvořeno s 🧠♥️😈 v Justmighty</span>
        </div>
      </div>
    </footer>);

}
window.Footer = Footer;