// Footer.jsx — shared footer mounted across every BlueMoso page (homepage,
// ICP pages, legal pages, apply page, etc.). One source of truth.
//
// Layout: 5 columns (Brand · Who we serve · Services · Company · Resources)
// followed by a "Browse every virtual assistant page" CTA strip, then the
// copyright line. Featured ICP/service links are curated by hand here. Long
// tail lives on the hubs: who-we-serve.html, services.html, virtual-assistants.html.

const footStyles = {
  wrap: { background: 'var(--ink)', color: 'var(--paper)', padding: '72px 32px 40px' },
  inner: { maxWidth: 1280, margin: '0 auto' },

  // Pre-footer CTA band — sits above the dark footer on every page. Mirrors
  // the Hero's primary CTA so the page bookends on the same promise.
  preWrap: {
    background: 'var(--paper-deep)',
    borderTop: '1px solid var(--line)',
    padding: '80px 32px',
  },
  preInner: {
    maxWidth: 1080, margin: '0 auto',
    textAlign: 'center',
    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24,
  },
  preEyebrow: {
    fontFamily: "'JetBrains Mono', ui-monospace, monospace",
    fontSize: 12, fontWeight: 500,
    letterSpacing: '0.14em', textTransform: 'uppercase',
    color: 'var(--blue)',
    display: 'inline-flex', alignItems: 'center', gap: 10,
  },
  preEyebrowDot: { width: 6, height: 6, borderRadius: 999, background: 'var(--coral)' },
  preH2: {
    fontFamily: "'Outfit', system-ui, sans-serif",
    fontSize: 'clamp(36px, 5vw, 56px)',
    lineHeight: 1.05,
    letterSpacing: '-0.025em',
    fontWeight: 600,
    color: 'var(--ink)',
    margin: 0, maxWidth: 760,
    textWrap: 'balance',
  },
  preH2Accent: { color: 'var(--blue)' },
  preBtn: {
    background: 'var(--ink)', color: 'var(--paper)',
    padding: '18px 28px', borderRadius: 12,
    fontSize: 16, fontWeight: 500,
    display: 'inline-flex', alignItems: 'center', gap: 8,
    transition: 'background .2s',
    textDecoration: 'none',
    marginTop: 8,
  },

  top: { display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1fr', gap: 40, paddingBottom: 36 },
  brandLine: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 },
  logoText: { fontSize: 18, fontWeight: 600, letterSpacing: '-0.02em' },
  tagline: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 22, lineHeight: 1.35, letterSpacing: '-0.01em', marginBottom: 20, maxWidth: 380, color: 'rgba(247,245,240,0.96)' },
  tagItalic: { color: 'var(--blue-mid)' },
  small: { fontSize: 13, color: 'rgba(247,245,240,0.92)', lineHeight: 1.55, maxWidth: 320 },
  colTitle: { fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--blue-mid)', marginBottom: 18, fontWeight: 500 },
  list: { listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 },
  link: { fontSize: 14, color: 'rgba(247,245,240,0.96)', transition: 'color .15s' },

  browseAllRow: {
    paddingTop: 28, paddingBottom: 28,
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14,
    flexWrap: 'wrap',
    textAlign: 'center',
  },
  browseAllText: { fontSize: 14, color: 'rgba(247,245,240,0.9)' },
  browseAllLink: { fontSize: 14, color: 'var(--blue-mid)', fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 6 },

  bottom: { paddingTop: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16, fontSize: 12, color: 'rgba(247,245,240,0.9)' },
};

function Footer({ baseHref = '' }) {
  const resolve = (href) => (baseHref && href.startsWith('#')) ? baseHref + href : href;

  // Pre-footer CTA uses data-booking-modal-trigger so the global BookingModal
  // delegated handler catches the click and pops the modal — same behavior
  // on every page. href is just a fallback for the no-JS case.

  const renderLink = (l) => (
    <li key={l.label}>
      <a href={l.href} className="bm-footer-link" style={{ ...footStyles.link, ...(l.allLink ? { color: 'var(--blue-mid)', fontWeight: 500 } : {}) }}>{l.label}</a>
    </li>
  );

  return (
    <>
      {/* Pre-footer CTA band — bookends the page with the Hero's promise. */}
      <section style={footStyles.preWrap} aria-label="Take back your time now">
        <div style={footStyles.preInner}>
          <span style={footStyles.preEyebrow}>
            <span style={footStyles.preEyebrowDot}></span>
            Ready when you are
          </span>
          <h2 style={footStyles.preH2}>
            Delegate the work. <span style={footStyles.preH2Accent}>Take back your time now.</span>
          </h2>
          <a href={resolve('#cta')} data-booking-modal-trigger data-booking-source="footer_pre_cta" style={footStyles.preBtn}
             onMouseEnter={e => e.currentTarget.style.background = 'var(--blue)'}
             onMouseLeave={e => e.currentTarget.style.background = 'var(--ink)'}>
            Take back your time now
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></svg>
          </a>
        </div>
      </section>

      {/* Footer link hover — applies to ALL footer links so they read uniformly
          as clickable. Underline on hover for every column link (Who we serve,
          Services, Company, Resources) including the accent "See all services"
          and "See everyone we serve" links and the browse-all CTA strip.
          Regular links also brighten to full white; accent links keep their
          blue. Spec'd here (vs. inline) because :hover can't be expressed in
          React inline styles. */}
      <style>{`
        footer a.bm-footer-link,
        footer a.bm-footer-browse-link {
          text-decoration: none;
          text-underline-offset: 3px;
          text-decoration-thickness: 1px;
        }
        footer a.bm-footer-link:hover,
        footer a.bm-footer-link:focus-visible,
        footer a.bm-footer-browse-link:hover,
        footer a.bm-footer-browse-link:focus-visible {
          text-decoration: underline;
        }
        footer a.bm-footer-link:hover,
        footer a.bm-footer-link:focus-visible {
          color: #ffffff;
        }
      `}</style>

      <footer style={footStyles.wrap}>
      <div style={footStyles.inner}>

        <div style={footStyles.top} className="bm-footer-grid">

          {/* BRAND */}
          <div>
            <div style={footStyles.brandLine}>
              <BMLogo height={44} tone="blue" />
            </div>
            <div style={footStyles.tagline}>The team behind <span style={footStyles.tagItalic}>you.</span></div>
            <div style={footStyles.small}>High-performing virtual assistants matched to busy professionals ready to get their time back.</div>
          </div>

          {/* WHO WE SERVE */}
          <div>
            <div style={footStyles.colTitle}>Who we serve</div>
            <ul style={footStyles.list}>
              {[
                { label: 'Realtors',           href: 'virtual-assistant-for-realtors.html' },
                { label: 'Lawyers',            href: 'virtual-assistant-for-lawyers.html' },
                { label: 'Financial Advisors', href: 'virtual-assistant-for-financial-advisors.html' },
                { label: 'Accountants & CPAs', href: 'virtual-assistant-for-accountants.html' },
                { label: 'Founders',           href: 'virtual-assistant-for-founders.html' },
                { label: 'Business Owners',    href: 'virtual-assistant-for-business-owners.html' },
                { label: 'Marketing Agencies', href: 'virtual-assistant-for-marketing-agencies.html' },
                { label: 'See everyone we serve →', href: 'who-we-serve.html', allLink: true },
              ].map(renderLink)}
            </ul>
          </div>

          {/* SERVICES — top 5 most-recognizable, founder-language categories.
              YouTube, Shopify, and the rest stay live and discoverable via
              the "See all services" link to /services.html. */}
          <div>
            <div style={footStyles.colTitle}>Services</div>
            <ul style={footStyles.list}>
              {[
                { label: 'Executive Assistance', href: 'virtual-assistant-for-executive-assistance.html' },
                { label: 'Customer Support',     href: 'virtual-assistant-for-customer-support.html' },
                { label: 'Operations',           href: 'virtual-assistant-for-operations.html' },
                { label: 'Social Media',         href: 'virtual-assistant-for-social-media.html' },
                { label: 'Marketing',            href: 'virtual-assistant-for-marketing.html' },
                { label: 'See all services →',   href: 'services.html', allLink: true },
              ].map(renderLink)}
            </ul>
          </div>

          {/* COMPANY */}
          <div>
            <div style={footStyles.colTitle}>Company</div>
            <ul style={footStyles.list}>
              {[
                { label: 'How it works',          href: resolve('#matching') },
                { label: 'Pricing',               href: resolve('#packages') },
                { label: 'Our story',             href: resolve('#story') },
                { label: 'FAQ',                   href: resolve('#faq') },
                { label: 'The human in the loop', href: 'human-in-the-loop.html' },
              ].map(renderLink)}
            </ul>
          </div>

          {/* RESOURCES */}
          <div>
            <div style={footStyles.colTitle}>Resources</div>
            <ul style={footStyles.list}>
              {[
                { label: 'Delegation Playbook',  href: 'playbook.html' },
                { label: 'Apply as a VA',        href: 'apply.html' },
                // Referral Program hidden from public navigation — page still
                // accessible at /referrals.html for direct sharing, but
                // de-indexed (see meta robots on the page itself).
                { label: 'Sitemap',              href: 'sitemap.html' },
                { label: 'Terms & Conditions',   href: 'terms.html' },
                { label: 'Privacy Policy',       href: 'privacy.html' },
                { label: 'Cookies Policy',       href: 'cookies.html' },
                { label: 'Disclaimers',          href: 'disclaimers.html' },
              ].map(renderLink)}
            </ul>
          </div>

        </div>

        {/* ===== Browse-all CTA strip ===== */}
        <div style={footStyles.browseAllRow}>
          <span style={footStyles.browseAllText}>Looking for something specific?</span>
          <a href="virtual-assistants.html" className="bm-footer-browse-link" style={footStyles.browseAllLink}>
            Browse every virtual assistant page
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8h10m0 0l-4-4m4 4l-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
        </div>

        <div style={footStyles.bottom}>
          <div>© 2026 BlueMoso. All rights reserved.</div>
        </div>

      </div>
    </footer>
    </>
  );
}

Object.assign(window, { Footer });