// Footer — quiet, brand-aligned, points back to The Vault Stock.
// pageLinks (optional) lets each page slot its own anchor links into a column.
function PSFooter({ pageLinks, pageLinksTitle = 'On this page' }) {
  const studioPages = [
    ['Overview', 'Product Studio.html'],
    ['How it works', 'Product Studio.html#how'],
    ['Capabilities', 'Capabilities.html'],
    ['Pricing', 'Product Studio.html#pricing'],
    ['Examples', 'Examples.html'],
    ['Vault Members', 'Vault Members.html'],
    ['FAQ', 'FAQ.html'],
  ];

  const features = [
    ['Product placement', 'Capabilities.html#modes'],
    ['Image creation', 'Capabilities.html#modes'],
    ['Video generation', 'Capabilities.html#video'],
    ['Backdrop library', 'Capabilities.html#backdrops'],
    ['Style presets', 'Capabilities.html#presets'],
    ['Placement styles', 'Capabilities.html#placement'],
  ];

  const useCases = [
    ['Apparel', 'Capabilities.html#industries'],
    ['Skincare & beauty', 'Capabilities.html#industries'],
    ['Jewelry', 'Capabilities.html#industries'],
    ['Footwear', 'Capabilities.html#industries'],
    ['Food & beverage', 'Capabilities.html#industries'],
    ['Homeware & tech', 'Capabilities.html#industries'],
  ];

  const company = [
    ['The Vault Stock', 'https://www.thevaultstock.com/'],
    ['Memberships', 'https://www.thevaultstock.com/memberships'],
    ['Contact', 'https://www.thevaultstock.com/contact'],
    ['Support', 'https://www.thevaultstock.com/contact'],
  ];

  return (
    <footer className="ps-section" data-mobile-pad="true" style={{ background: 'var(--cocoa)', color: 'var(--cream)', padding: '96px 48px 40px', position: 'relative' }}>
      {/* Marquee strip */}
      <div className="ps-marquee-mobile" style={{ overflow: 'hidden', marginBottom: 80, marginInline: -48, paddingTop: 8, paddingBottom: 8, borderTop: '1px solid var(--cocoa-soft)', borderBottom: '1px solid var(--cocoa-soft)' }}>
        <div style={{ display: 'flex', gap: 48, whiteSpace: 'nowrap', animation: 'marq 48s linear infinite' }}>
          {Array(10).fill(0).map((_, i) =>
          <span key={i} style={{
            fontFamily: '"La Villa", sans-serif', fontSize: 36, fontWeight: 500,
            letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cream)',
            display: 'inline-flex', alignItems: 'center', gap: 48
          }}>
              Real photography
              <span style={{ fontFamily: '"La Villa", sans-serif', fontStyle: 'normal', fontSize: 36, letterSpacing: 0, textTransform: 'none', opacity: 0.55 }}>·</span>
              AI placement
              <span style={{ fontFamily: '"La Villa", sans-serif', fontStyle: 'normal', fontSize: 36, letterSpacing: 0, textTransform: 'none', opacity: 0.55 }}>·</span>
            </span>
          )}
        </div>
      </div>

      <div className="ps-footer-cols ps-stack-mobile-2" style={{
        display: 'grid',
        gridTemplateColumns: pageLinks ? '1.4fr repeat(5, 1fr)' : '1.4fr repeat(4, 1fr)',
        gap: 32, maxWidth: 1400, margin: '0 auto', alignItems: 'start',
      }}>
        {/* Brand block */}
        <div>
          <div className="celestial" style={{ fontSize: 56, color: 'var(--cream)', lineHeight: 0.95, marginBottom: 12 }}>
            Product<br />Studio
          </div>
          <a href="https://www.thevaultstock.com/" target="_blank" rel="noopener" style={{
            fontFamily: '\"La Villa\", sans-serif', fontSize: 11, fontWeight: 500,
            letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--sand)',
            textDecoration: 'none', display: 'inline-block',
            transition: 'color 200ms'
          }}
          onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--cream)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--sand)'; }}>
            By The Vault Stock™ ↗
          </a>
          <p style={{ fontFamily: '"La Villa", sans-serif', fontStyle: 'normal', fontSize: 16, color: 'var(--cream)', opacity: 0.78, marginTop: 28, maxWidth: 320, lineHeight: 1.5 }}>
            Place your product where the light already lives.
          </p>
        </div>

        {/* On-this-page links (optional, page-specific anchors) */}
        {pageLinks && (
          <FooterColumn title={pageLinksTitle} items={pageLinks} />
        )}

        <FooterColumn title="Product Studio" items={studioPages} />
        <div className="ps-footer-hide-mobile"><FooterColumn title="Features" items={features} /></div>
        <div className="ps-footer-hide-mobile"><FooterColumn title="Use cases" items={useCases} /></div>
        <FooterColumn title="Company" items={company} />
      </div>

      {/* Bottom legal row */}
      <div className="ps-flex-stack-mobile" style={{
        maxWidth: 1400, margin: '64px auto 0',
        paddingTop: 28, borderTop: '1px solid var(--cocoa-soft)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        flexWrap: 'wrap', gap: 16,
      }}>
        <div style={{
          fontFamily: '"La Villa", sans-serif', fontSize: 11, letterSpacing: '0.18em',
          textTransform: 'uppercase', color: 'var(--sand)',
        }}>
          © {new Date().getFullYear()} The Vault Stock™ · All rights reserved
        </div>
        <div style={{ display: 'flex', gap: 28 }}>
          {[
            ['Terms', 'Terms.html'],
            ['Privacy', 'https://www.thevaultstock.com/privacypolicy'],
          ].map(([l, h]) => (
            <a key={l} href={h} target={h.startsWith('http') ? '_blank' : undefined} rel={h.startsWith('http') ? 'noopener' : undefined} style={{
              fontFamily: '"La Villa", sans-serif', fontSize: 12, color: 'var(--cream)', opacity: 0.78,
            }}>{l}</a>
          ))}
        </div>
      </div>
    </footer>
  );
}

function FooterColumn({ title, items }) {
  return (
    <div>
      <div className="eyebrow" style={{ color: 'var(--sand)', marginBottom: 18 }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
        {items.map(([l, h]) => (
          <li key={l}>
            <a href={h}
              target={h.startsWith('http') ? '_blank' : undefined}
              rel={h.startsWith('http') ? 'noopener' : undefined}
              style={{ color: 'var(--cream)', fontFamily: '"La Villa", sans-serif', fontSize: 13, opacity: 0.85 }}>
              {l}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { PSFooter });