const { Asterisk, Button } = window.MartiniVastgoedDesignSystem_adb8d1;

function FootLetters({ text }) {
  const kern = { Va: '-0.05em' };
  return text.split('').map((ch, i) => (
    <span key={i} className="mvpf-l" style={{ display: 'inline-block', marginLeft: (i > 0 && kern[text[i - 1] + ch]) || 0 }}>{ch === ' ' ? '\u00A0' : ch}</span>
  ));
}

function FootMarquee() {
  const items = ['Bel 050 230 74 21', 'Mail info@martinivastgoed.nl', 'Kom langs op de Vismarkt 32', 'Sinds 1992'];
  const Track = ({ ariaHidden }) => (
    <div className="mvpf-track" aria-hidden={ariaHidden} style={{ display: 'flex', flexShrink: 0, minWidth: '100%', alignItems: 'center', gap: '2.5rem', padding: '13px 1.25rem' }}>
      {items.map((t, i) => (
        <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: '2.5rem', font: '800 1.25rem/1 var(--font-display)', textTransform: 'uppercase', color: 'var(--mv-ink)', whiteSpace: 'nowrap' }}>{t}<span aria-hidden="true">✳</span></span>
      ))}
    </div>
  );
  return (
    <div style={{ display: 'flex', overflow: 'hidden', background: 'var(--mv-tangerine)', borderTop: '3px solid var(--mv-ink)', borderBottom: '3px solid var(--mv-ink)' }}>
      <Track /><Track ariaHidden="true" />
    </div>
  );
}

function FooterPlayful() {
  const wmRef = React.useRef(null);
  React.useEffect(() => {
    const el = wmRef.current;
    if (!el) return;
    const fit = () => {
      const avail = el.clientWidth;
      el.style.fontSize = '100px';
      const w = el.scrollWidth;
      el.style.fontSize = Math.max(30, Math.floor((avail / w) * 100 * 0.99)) + 'px';
    };
    fit();
    if (document.fonts && document.fonts.ready) document.fonts.ready.then(fit);
    window.addEventListener('resize', fit);
    return () => window.removeEventListener('resize', fit);
  }, []);
  const cols = [
    { h: 'Diensten', items: ['Verhuur', 'Verkopen', 'Kopen', 'Taxeren', 'Waardebepaling'] },
    { h: 'Martini', items: ['Over ons', 'Team', 'Werkgebied', 'Reviews', 'Contact'] },
    { h: 'Volg ons', items: ['Instagram', 'LinkedIn', 'Facebook', 'YouTube'] },
  ];
  return (
    <footer style={{ background: 'var(--mv-ink)', color: 'var(--mv-bone)' }}>
      <FootMarquee />
      <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: 'clamp(3rem,7vh,5rem) var(--gutter) var(--space-6)' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-7)', alignItems: 'flex-start', justifyContent: 'space-between' }}>
          <div>
            <p style={{ margin: 0, font: '700 var(--fs-label)/1 var(--font-mono)', letterSpacing: 'var(--ls-label)', textTransform: 'uppercase', color: 'var(--mv-green)' }}>Benieuwd wat er kan?</p>
            <a href="mailto:info@martinivastgoed.nl" className="mvpf-cta" style={{ display: 'inline-block', margin: '14px 0 0', font: '900 clamp(1.6rem,3.4vw,2.8rem)/1.05 var(--font-display)', letterSpacing: 'var(--ls-display)', color: 'var(--mv-bone)', textDecoration: 'none', borderBottom: '4px solid var(--mv-pink)' }}>Stuur ons een berichtje <span aria-hidden="true" className="mvpf-arrow" style={{ display: 'inline-block' }}>→</span></a>
            <p style={{ margin: '22px 0 0', font: '400 var(--fs-body-sm)/1.7 var(--font-mono)', color: 'var(--mv-bone-70)' }}>Vismarkt 32 · 9711 KT Groningen<br />050 230 74 21 · info@martinivastgoed.nl</p>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-8)' }}>
            {cols.map((c) => (
              <div key={c.h}>
                <p style={{ margin: '0 0 16px', font: '700 var(--fs-label-sm)/1 var(--font-mono)', letterSpacing: 'var(--ls-label)', textTransform: 'uppercase', color: 'var(--mv-green)' }}>{c.h}</p>
                <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {c.items.map((i) => (
                    <li key={i}><a href="#" className="mvpf-link" style={{ display: 'inline-block', font: '500 var(--fs-body-sm)/1 var(--font-body)', color: 'var(--mv-bone)', textDecoration: 'none' }}>{i}</a></li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
        <div aria-hidden="true" ref={wmRef} style={{ marginTop: 'clamp(2.5rem,6vh,4rem)', display: 'flex', alignItems: 'center', gap: '0.18em', fontSize: 'clamp(3rem,9vw,9.5rem)' }}>
          <span className="mvpf-flag" aria-hidden="true" style={{ display: 'grid', gridTemplateRows: 'repeat(3,1fr)', gap: '0.035em', width: '0.34em', height: '0.66em', flex: 'none' }}>
            <i className="mvpf-bar" style={{ background: 'var(--mv-green)' }}></i>
            <i className="mvpf-bar" style={{ background: 'var(--mv-pink)' }}></i>
            <i className="mvpf-bar" style={{ background: 'var(--mv-tangerine)' }}></i>
          </span>
          <p style={{ margin: 0, font: '900 1em/0.9 var(--font-display)', letterSpacing: '-0.02em', textTransform: 'uppercase', whiteSpace: 'nowrap', color: 'var(--mv-bone)' }}>
            <FootLetters text="Martini Vastgoed" /><span className="mvpf-l" style={{ display: 'inline-block', color: 'var(--mv-pink)' }}>.</span>
          </p>
        </div>
        <div style={{ marginTop: 'var(--space-6)', paddingTop: 'var(--space-5)', borderTop: '2px solid var(--mv-bone-70)', display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'space-between', font: '400 var(--fs-label-sm)/1.4 var(--font-mono)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--mv-bone-70)' }}>
          <span>© 2026 Martini Vastgoed · Vismarkt 32, Groningen</span>
          <span>KvK 01234567 · NVM Makelaar</span>
        </div>
      </div>
      <style>{`
        .mvpf-track{animation:mvpfScroll 20s linear infinite}
        @keyframes mvpfScroll{to{transform:translateX(-100%)}}
        .mvpf-l{transition:transform .18s cubic-bezier(.3,1.6,.5,1),color .18s}
        .mvpf-l:hover{transform:translateY(-0.1em) rotate(-5deg);color:var(--mv-green)}
        .mvpf-l:nth-child(3n):hover{color:var(--mv-pink)}
        .mvpf-l:nth-child(3n+1):hover{color:var(--mv-tangerine)}
        .mvpf-link{transition:transform .16s,color .16s}
        @media(max-width:760px){.mvpf-link{min-height:44px;display:flex!important;align-items:center}.mvpf-cta{line-height:1.2}}
        .mvpf-link:hover{color:var(--mv-green);transform:translateX(6px) rotate(-1deg)}
        .mvpf-cta .mvpf-arrow{transition:transform .18s}
        .mvpf-cta:hover{color:var(--mv-pink)}
        .mvpf-cta:hover .mvpf-arrow{transform:translateX(10px)}
        .mvpf-bar{display:block;transition:transform .28s cubic-bezier(.3,1.4,.5,1)}
        .mvpf-flag:hover .mvpf-bar:nth-child(1){transform:translateX(-14%)}
        .mvpf-flag:hover .mvpf-bar:nth-child(2){transform:translateX(22%)}
        .mvpf-flag:hover .mvpf-bar:nth-child(3){transform:translateX(-8%)}
        @media(prefers-reduced-motion:reduce){.mvpf-track{animation:none}.mvpf-l,.mvpf-link,.mvpf-arrow,.mvpf-bar{transition:none}}
      `}</style>
    </footer>
  );
}
Object.assign(window, { FooterPlayful });
