const { Logo, Icon } = window.PixelmindsDesignSystem_c25e6a;

const F_SERVICES = ['Σχεδιασμός Ιστοσελίδων', 'Ανάπτυξη eCommerce', 'Φιλοξενία & Υποδομή', 'Ασφάλεια Ιστοσελίδων', 'SEO & Analytics', 'Digital Marketing'];
const F_SOCIAL = ['linkedin', 'facebook', 'instagram', 'youtube'];
const F_LEGAL = ['Πολιτική Απορρήτου', 'Cookies', 'Όροι Χρήσης'];

function FootLink({ children, onClick }) {
  const [h, setH] = React.useState(false);
  return <a href="#" onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{ fontSize: 13.5, color: h ? '#fff' : 'var(--steel)', textDecoration: 'none', transition: 'color var(--dur) var(--ease)' }}>{children}</a>;
}

function FootSocial({ name }) {
  const [h, setH] = React.useState(false);
  return <a href="#" aria-label={name} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
    style={{ width: 34, height: 34, display: 'grid', placeItems: 'center', borderRadius: 'var(--radius-sm)', border: '1px solid ' + (h ? 'var(--purple-primary)' : 'var(--line-dark)'), transition: 'border-color var(--dur) var(--ease)' }}>
    <Icon name={name} size={16} color={h ? 'var(--purple-light)' : 'var(--steel)'} />
  </a>;
}

function LangSwitch({ lang, onLang, tone = 'dark' }) {
  const light = tone === 'light';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, fontWeight: 600, letterSpacing: '.06em' }}>
      {['gr', 'en'].map((l, i) => (
        <React.Fragment key={l}>
          {i > 0 && <span style={{ color: light ? 'var(--light-border-subtle)' : 'var(--line-dark)' }}>|</span>}
          <button type="button" onClick={() => onLang(l)} aria-pressed={lang === l}
            style={{ background: 'none', border: 0, padding: 0, cursor: 'pointer', font: 'inherit', letterSpacing: 'inherit', color: lang === l ? (light ? 'var(--purple-primary)' : 'var(--purple-light)') : (light ? 'var(--light-text-muted)' : 'var(--steel)'), borderBottom: '1.5px solid ' + (lang === l ? 'var(--purple-primary)' : 'transparent'), transition: 'color var(--dur) var(--ease)' }}>
            {l.toUpperCase()}
          </button>
        </React.Fragment>
      ))}
    </div>
  );
}

/** Mounts an interactive LangSwitch into the design-system Header's static GR | EN slot. */
function HeaderLangSlot({ lang, onLang, tone, dep }) {
  const [host, setHost] = React.useState(null);
  React.useLayoutEffect(() => {
    const slot = document.querySelector('.pm-header-lang');
    if (!slot) return;
    slot.textContent = '';
    slot.style.display = 'flex';
    slot.style.alignItems = 'center';
    const el = document.createElement('span');
    slot.appendChild(el);
    setHost(el);
    return () => { setHost(null); if (el.parentNode) el.parentNode.removeChild(el); };
  }, [dep, tone]);
  return host ? ReactDOM.createPortal(<LangSwitch lang={lang} onLang={onLang} tone={tone} />, host) : null;
}

function FooterGR({ basePath = '.', lang = 'gr', onLang = () => {}, go = () => {}, services = F_SERVICES, tagline = 'Ψηφιακές λύσεις για σύγχρονες επιχειρήσεις.' }) {
  return (
    <footer style={{ background: 'var(--black-rich)', borderTop: '1px solid var(--line-dark)', color: 'var(--steel)' }}>
      <div className="pm-container pm-footer-grid" style={{ paddingBlock: 44, display: 'grid', gap: 40 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 300 }}>
          <Logo basePath={basePath} height={34} />
          <p style={{ fontSize: 13.5, lineHeight: 1.6 }}>{tagline}</p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{ fontSize: 11.5, fontWeight: 600, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--gray-200)' }}>Υπηρεσίες</div>
          {services.slice(0, 3).map(s => <FootLink key={s}>{s}</FootLink>)}
        </div>
        <div className="pm-footer-col2" style={{ display: 'flex', flexDirection: 'column', gap: 10, paddingTop: 24 }}>
          {services.slice(3).map(s => <FootLink key={s}>{s}</FootLink>)}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-start' }}>
          <div style={{ display: 'flex', gap: 8 }}>{F_SOCIAL.map(s => <FootSocial key={s} name={s} />)}</div>
          <LangSwitch lang={lang} onLang={onLang} />
        </div>
      </div>
      <div style={{ borderTop: '1px solid var(--line-dark)' }}>
        <div className="pm-container" style={{ paddingBlock: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 20, fontSize: 12.5 }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 22 }}>{F_LEGAL.map(l => <FootLink key={l} onClick={l === 'Πολιτική Απορρήτου' ? (e) => { e.preventDefault(); go('Πολιτική Απορρήτου'); } : undefined}>{l}</FootLink>)}</div>
          <span>© {new Date().getFullYear()} PIXELMINDS</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { FooterGR, LangSwitch, HeaderLangSlot });