/* Qortex — shared components (Nav, SectionHead, ImageSlot, Footer) */

function TopNav({ accent }) {
  const links = [
    ['Vad vi gör', '#tjanster'],
    ['Hur vi tänker', '#metod'],
    ['I urval', '#case'],
    ['Teamet', '#team'],
    ['Karriär', '#karriar'],
    ['Kontakt', '#kontakt'],
  ];
  return (
    <header className="qx-nav">
      <a href="#top" className="qx-nav__logo" aria-label="Qortex">
        <img src="assets/qortex-logo.png" alt="Qortex" />
      </a>
      <nav className="qx-nav__links">
        {links.map(([label, href]) => (
          <a key={href} href={href}>{label}</a>
        ))}
      </nav>
      <a href="#kontakt" className="qx-btn qx-btn--primary" style={{ '--accent': accent }}>
        Boka möte
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
          <path d="M3 7h8M7.5 3.5L11 7l-3.5 3.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>
    </header>
  );
}

function SectionHead({ num, eyebrow, title, lede, align = 'left', accentTitle = null }) {
  return (
    <header className={`qx-sechead qx-sechead--${align}`}>
      <div className="qx-sechead__top">
        <span className="qx-sechead__num">{num}</span>
        <span className="qx-sechead__rule" />
        <span className="qx-eyebrow">{eyebrow}</span>
      </div>
      <h2 className="qx-sechead__title">
        {title}
        {accentTitle && <span className="qx-sechead__accent"> {accentTitle}</span>}
      </h2>
      {lede && <p className="qx-sechead__lede">{lede}</p>}
    </header>
  );
}

/* Striped diagonal placeholder for any photo/image slot */
function ImageSlot({ label, sub, aspect = '4 / 5', accent = false, children }) {
  return (
    <div className={`qx-slot ${accent ? 'qx-slot--accent' : ''}`} style={{ aspectRatio: aspect }}>
      <span className="qx-slot__label">{label}</span>
      {sub && <span className="qx-slot__sub">{sub}</span>}
      {children}
    </div>
  );
}

function Footer({ accent }) {
  return (
    <footer className="qx-footer">
      <div className="qx-footer__inner">
        <div className="qx-footer__brand">
          <img src="assets/qortex-logo.png" alt="Qortex" className="qx-footer__logo"/>
          <p className="qx-footer__addr">
            Qortex AB<br/>
            Kungsportsavenyen 22<br/>
            411 36 Göteborg
          </p>
        </div>

        <div className="qx-footer__cols">
          <div>
            <span className="qx-eyebrow qx-eyebrow--muted">Navigera</span>
            <ul>
              <li><a href="#tjanster">Vad vi gör</a></li>
              <li><a href="#metod">Hur vi tänker</a></li>
              <li><a href="#case">I urval</a></li>
              <li><a href="#team">Teamet</a></li>
              <li><a href="#karriar">Karriär</a></li>
            </ul>
          </div>
          <div>
            <span className="qx-eyebrow qx-eyebrow--muted">Kontakt</span>
            <ul>
              <li><a href="mailto:ida@qortex.se">ida@qortex.se</a></li>
              <li><a href="tel:+46700000000">+46 70 000 00 00</a></li>
              <li><a href="https://linkedin.com" target="_blank" rel="noreferrer">LinkedIn</a></li>
            </ul>
          </div>
          <div>
            <span className="qx-eyebrow qx-eyebrow--muted">Del av</span>
            <ul>
              <li><a href="https://q.group/" target="_blank" rel="noreferrer">Q-group ↗</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div className="qx-footer__base">
        <span>© {new Date().getFullYear()} Qortex AB · Org.nr 559xxx-xxxx</span>
        <span><a href="#">Integritet</a> · <a href="#">Cookies</a></span>
      </div>
    </footer>
  );
}

Object.assign(window, { TopNav, SectionHead, ImageSlot, Footer });