/* OLIS website — chrome: Nav + Footer (light, institutional) */
(function () {


  const { Button, Badge } = window.OLISDesignSystem_ba3bd8;
  const Icon = window.Icon;
  const i18n = window.i18nConfig;

  function Logo({ compact }) {
    const goHome = () => {
      window.location.href = `/${i18n.locale}`;
    };
    return (
      <a href="javascript:void(0)" onClick={goHome} style={{ display: 'flex', alignItems: 'center', gap: 11, textDecoration: 'none', cursor: 'pointer' }}>
        <img src="../../assets/olis-mark.svg" alt="OLIS" style={{ width: 38, height: 38 }} />
        {!compact && (
          <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, letterSpacing: '0.04em', color: 'var(--text-strong)' }}>
              OLIS<span style={{ color: 'var(--accent)', fontWeight: 500 }}> MG</span>
            </span>
            <span style={{ fontFamily: 'var(--font-text)', fontSize: 9.5, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--text-muted)', marginTop: 3 }}>Marketing Group</span>
          </span>
        )}
      </a>
    );
  }

  function Nav({ onInvest }) {
    const links = [
      { label: i18n.t('navHowItWorks'), key: 'howItWorks', id: 'how-it-works' },
      { label: i18n.t('navProgram'), key: 'program', id: 'program' },
      { label: i18n.t('navProtection'), key: 'protection', id: 'protection' },
      { label: i18n.t('navReturns'), key: 'returns', id: 'returns' },
    ];

    const toggleLanguage = () => {
      const currentLocale = i18n.locale;
      const newLocale = currentLocale === 'es' ? 'en' : 'es';
      window.location.href = `/${newLocale}`;
    };

    const scrollToSection = (id) => {
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      } else {
        // If section doesn't exist (e.g., on contact page), navigate to design home page with hash
        window.location.href = `/api/design?locale=${i18n.locale}#${id}`;
      }
    };

    return (
      <header style={{
        position: 'sticky', top: 0, zIndex: 50,
        background: 'color-mix(in srgb, var(--surface-canvas) 88%, transparent)',
        backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
        borderBottom: '1px solid var(--border-subtle)',
      }}>
        <div style={{
          maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '13px var(--gutter)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
        }}>
          <Logo />
          <nav style={{ display: 'flex', gap: 30, alignItems: 'center' }} className="olis-navlinks">
            {links.map((l) => (
              <a key={l.key} href="javascript:void(0)" onClick={() => scrollToSection(l.id)} style={{
                fontFamily: 'var(--font-text)', fontSize: 14, fontWeight: 500, color: 'var(--text-body)',
                transition: 'color .15s', cursor: 'pointer',
              }}
                onMouseEnter={(e) => e.currentTarget.style.color = 'var(--brand)'}
                onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-body)'}
              >{l.label}</a>
            ))}
          </nav>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <Button variant="ghost" size="sm" onClick={toggleLanguage} title="Toggle language">{i18n.locale.toUpperCase()}</Button>
            <Button variant="ghost" size="sm" onClick={() => window.location.href = '/login'}>{i18n.t('signIn')}</Button>
            <Button variant="primary" size="sm" onClick={onInvest} iconRight={<Icon name="arrow-right" size={16} />}>{i18n.t('btnInvest')}</Button>
          </div>
        </div>
      </header>
    );
  }

  function Footer({ onLegal }) {
    const footerItems = {
      product: [{ key: 'footerProgram', action: 'scroll', target: 'program' }, { key: 'footerReturns', action: 'scroll', target: 'returns' }, { key: 'footerCalculator', action: 'scroll', target: 'returns' }, { key: 'footerProtection', action: 'scroll', target: 'protection' }],
      company: [{ key: 'footerAbout', action: 'scroll', target: 'about' }, { key: 'footerReserveFund', action: 'scroll', target: 'reserve-fund' }, { key: 'footerLegalFramework', action: 'scroll', target: 'legal-framework' }, { key: 'footerContact', action: 'navigate', target: 'contact' }],
      legal: [{ key: 'footerAgreement', action: 'legal', target: 'agreement' }, { key: 'footerTerms', action: 'legal', target: 'terms' }, { key: 'footerPrivacy', action: 'legal', target: 'privacy' }, { key: 'footerRisk', action: 'legal', target: 'risk' }],
    };

    const cols = [
      { h: i18n.t('footerProduct'), items: footerItems.product },
      { h: i18n.t('footerCompany'), items: footerItems.company },
      { h: i18n.t('footerLegal'), items: footerItems.legal },
    ];

    const scrollToSection = (id) => {
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      } else {
        // If section doesn't exist (e.g., on contact page), navigate to design home page with hash
        window.location.href = `/api/design?locale=${i18n.locale}#${id}`;
      }
    };

    const handleFooterLink = (itemConfig) => {
      if (itemConfig.action === 'navigate') {
        window.location.href = `/${i18n.locale}/${itemConfig.target}`;
      } else if (itemConfig.action === 'scroll') {
        scrollToSection(itemConfig.target);
      } else if (itemConfig.action === 'legal') {
        if (onLegal) {
          onLegal(itemConfig.target);
        }
      }
    };

    return (
      <footer style={{ borderTop: '1px solid var(--border-subtle)', background: 'var(--surface-alt)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'var(--space-9) var(--gutter) var(--space-6)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40 }} className="olis-footgrid">
            <div>
              <Logo />
              <p style={{ marginTop: 18, fontSize: 13.5, lineHeight: 1.6, color: 'var(--text-muted)', maxWidth: 260 }}>
                {i18n.t('footerAboutText')}
              </p>
              <div style={{ marginTop: 18 }}><Badge tone="protected" icon={<Icon name="shield-check" size={13} />}>{i18n.t('badgeCapitalProtected')}</Badge></div>
            </div>
            {cols.map((c) => (
              <div key={c.h}>
                <div style={{ fontFamily: 'var(--font-text)', fontSize: 11.5, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-faint)', marginBottom: 14 }}>{c.h}</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
                  {c.items.map((it) => (
                    <li key={it.key}><a href="javascript:void(0)" onClick={() => handleFooterLink(it)} style={{ fontSize: 13.5, color: 'var(--text-body)', transition: 'color .15s', cursor: 'pointer' }}
                      onMouseEnter={(e) => e.currentTarget.style.color = 'var(--brand)'}
                      onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-body)'}>{i18n.t(it.key)}</a></li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 'var(--space-8)', paddingTop: 'var(--space-5)', borderTop: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 12.5, color: 'var(--text-faint)' }}>{i18n.t('footerCopyright')}</span>
            <span style={{ fontSize: 12.5, color: 'var(--text-faint)' }}>{i18n.t('footerDisclaimer')}</span>
          </div>
        </div>
      </footer>
    );
  }

  Object.assign(window, { OLISLogo: Logo, OLISNav: Nav, OLISFooter: Footer });
})();