// Maple Pavers Explorer — FOOTER, 5 variants.
(function () {
  const { Button } = window.MaplePaversDesignSystem_8de4d8;
  const { Icon, ASSET, PHONE, startQuote } = window.MP;
  const AREAS = window.MP.data.areas;
  const ADDRESS = '245 Bridgeland Ave, North York, ON M6A 1Z4';
  const EMAIL = 'hello@maplepavers.ca';
  const HOURS = 'Mon–Fri 8 AM–6 PM · Sat by appointment';
  const YEAR = '\u00A9 2025 Maple Pavers Inc. · Family-owned since 1992';

  function Social() {
    return (
      <div style={{ display: 'flex', gap: 10 }}>
        {['instagram', 'facebook'].map((n) => (
          <a key={n} href="#" aria-label={n} style={{ width: 36, height: 36, borderRadius: 'var(--radius)', border: '1px solid rgba(248,240,229,0.22)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--beige-150)' }}><Icon name={n} size={17} /></a>
        ))}
      </div>
    );
  }
  function Legal() {
    return (
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px 14px', fontFamily: 'var(--font-body)', fontSize: 11.5 }}>
        <a href="#" style={{ color: 'var(--text-on-dark-muted)' }}>Privacy</a>
        <a href="#" style={{ color: 'var(--text-on-dark-muted)' }}>Terms</a>
      </div>
    );
  }
  const lbl = { fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--clay)', margin: '0 0 10px' };
  const li = { fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: '22px', color: 'var(--text-on-dark-muted)' };

  // V1 — Full dark
  function FootFull() {
    return (
      <footer style={{ background: 'var(--graphite)', padding: '40px 22px 28px', color: 'var(--beige-150)' }}>
        <img src={ASSET + 'logo-horizontal-dark.png'} alt="Maple Pavers" style={{ height: 32, marginBottom: 18 }} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 22 }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 9, ...li }}><Icon name="phone" size={15} color="var(--clay)" /> {PHONE}</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 9, ...li }}><Icon name="mail" size={15} color="var(--clay)" /> {EMAIL}</span>
          <span style={{ display: 'flex', alignItems: 'flex-start', gap: 9, ...li }}><Icon name="map-pin" size={15} color="var(--clay)" style={{ marginTop: 3, flex: 'none' }} /> <span style={{ flex: 1, lineHeight: '20px' }}>{ADDRESS}</span></span>
          <span style={{ display: 'flex', alignItems: 'flex-start', gap: 9, ...li }}><Icon name="clock" size={15} color="var(--clay)" style={{ marginTop: 3, flex: 'none' }} /> <span style={{ flex: 1, lineHeight: '20px' }}>{HOURS}</span></span>
        </div>
        <div style={{ marginBottom: 22 }}>
          <p style={lbl}>Service Areas</p>
          <p style={{ ...li, lineHeight: '20px' }}>{AREAS.join(' · ')}</p>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid rgba(255,255,255,0.12)', paddingTop: 18 }}>
          <Social />
          <Legal />
        </div>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: 'var(--text-on-dark-muted)', margin: '16px 0 0' }}>{YEAR}</p>
      </footer>
    );
  }

  // V2 — Compact 2-col
  function FootCompact() {
    return (
      <footer style={{ background: 'var(--graphite)', padding: '36px 22px 26px', color: 'var(--beige-150)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <div>
            <img src={ASSET + 'mark-solid.png'} alt="" style={{ width: 34, marginBottom: 12, filter: 'brightness(0) invert(1)', opacity: 0.9 }} />
            <p style={{ ...li, margin: 0 }}>{ADDRESS}</p>
            <p style={{ ...li, margin: '8px 0 0' }}>{HOURS}</p>
          </div>
          <div>
            <p style={lbl}>Contact</p>
            <p style={{ ...li, margin: 0 }}>{PHONE}</p>
            <p style={{ ...li, margin: '4px 0 14px' }}>{EMAIL}</p>
            <Social />
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid rgba(255,255,255,0.12)', paddingTop: 16, marginTop: 22 }}>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 10.5, color: 'var(--text-on-dark-muted)' }}>{YEAR}</span>
          <Legal />
        </div>
      </footer>
    );
  }

  // V3 — Big wordmark
  function FootWordmark() {
    return (
      <footer style={{ background: 'var(--graphite)', padding: '44px 22px 26px', color: 'var(--beige-150)' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 46, letterSpacing: '-0.02em', lineHeight: 0.95, color: 'var(--beige-150)' }}>Maple<br /><span style={{ color: 'var(--clay)' }}>Pavers</span></div>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-on-dark-muted)', margin: '16px 0 20px', maxWidth: 280 }}>Timeless stonework, Toronto-trusted, built to last. {PHONE} · {EMAIL}</p>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Social />
          <Button variant="primary" size="sm" onClick={startQuote}>Free Quote</Button>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid rgba(255,255,255,0.12)', paddingTop: 16, marginTop: 22 }}>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 10.5, color: 'var(--text-on-dark-muted)' }}>{YEAR}</span>
          <Legal />
        </div>
      </footer>
    );
  }

  // V4 — Service-area focused
  function FootAreas() {
    return (
      <footer style={{ background: 'var(--graphite)', padding: '40px 22px 26px', color: 'var(--beige-150)' }}>
        <p style={{ ...lbl, textAlign: 'center', color: 'var(--clay)' }}>Proudly Serving the GTA</p>
        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 8, marginBottom: 26 }}>
          {AREAS.map((a) => (
            <span key={a} style={{ display: 'flex', alignItems: 'center', gap: 5, border: '1px solid rgba(248,240,229,0.2)', borderRadius: 999, padding: '6px 12px', fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--beige-150)' }}>
              <Icon name="map-pin" size={12} color="var(--clay)" /> {a}
            </span>
          ))}
        </div>
        <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 20 }}>
          <span style={{ ...li }}>{PHONE} · {EMAIL}</span>
          <span style={{ ...li, fontSize: 12 }}>{ADDRESS}</span>
          <span style={{ ...li, fontSize: 12 }}>{HOURS}</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, borderTop: '1px solid rgba(255,255,255,0.12)', paddingTop: 18 }}>
          <Social />
          <Legal />
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 10.5, color: 'var(--text-on-dark-muted)' }}>{YEAR}</span>
        </div>
      </footer>
    );
  }

  // V5 — CTA + footer combo
  function FootCta() {
    return (
      <footer>
        <div style={{ background: 'var(--terracotta)', padding: '36px 22px', textAlign: 'center' }}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 25, lineHeight: 1.12, color: '#fff', margin: '0 0 16px' }}>Still scrolling? Your driveway isn't getting any newer.</h3>
          <Button variant="secondary" size="lg" onClick={startQuote} style={{ width: '100%', justifyContent: 'center', color: '#fff', borderColor: 'rgba(255,255,255,0.6)' }}>Design My Driveway</Button>
        </div>
        <div style={{ background: 'var(--graphite)', padding: '30px 22px 26px', color: 'var(--beige-150)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 18 }}>
            <img src={ASSET + 'logo-horizontal-dark.png'} alt="Maple Pavers" style={{ height: 28 }} />
            <Social />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 5, marginBottom: 16 }}>
            <span style={{ ...li, fontSize: 12 }}>{PHONE} · {EMAIL}</span>
            <span style={{ ...li, fontSize: 12 }}>{ADDRESS} · {HOURS}</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid rgba(255,255,255,0.12)', paddingTop: 14 }}>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 10.5, color: 'var(--text-on-dark-muted)' }}>{YEAR}</span>
            <Legal />
          </div>
        </div>
      </footer>
    );
  }

  window.MP.register('footer', {
    label: 'Footer',
    options: [
      { id: 'full', name: '1 · Full dark', Render: FootFull },
      { id: 'compact', name: '2 · Compact 2-col', Render: FootCompact },
      { id: 'wordmark', name: '3 · Big wordmark', Render: FootWordmark },
      { id: 'areas', name: '4 · Service-area focus', Render: FootAreas },
      { id: 'cta', name: '5 · CTA + footer', Render: FootCta },
    ],
  });
})();