// sig-universal-footer.jsx — the universal navy footer used across
// all Lifestyle landing pages (Brenda, Destiny, Jasmine, Keisha,
// Tamara), brought into the 7 Days Signature Program page so the
// program page closes on the same institutional ground as every
// Lifestyle.

// Phosphor Icons stylesheet — singleton-load.
if (typeof document !== 'undefined' && !document.querySelector('link[data-phosphor]')) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.dataset.phosphor = 'true';
  link.href = 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css';
  document.head.appendChild(link);
}

// Custom Lemon8 mark — Phosphor doesn't ship one.
const Lemon8IconSig = () => (
  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"
    fill="none" stroke="currentColor" strokeWidth="1.6"
    strokeLinecap="round" strokeLinejoin="round">
    <path d="M9.6 3.2c-1.8 0.2 -3.2 1.4 -3.6 2.8 1.4 0.2 2.7 -0.2 3.6 -1 0.9 -0.8 1.2 -1.5 0 -1.8z"
      fill="currentColor" stroke="none" />
    <ellipse cx="12" cy="9.6" rx="3.4" ry="3.2" />
    <ellipse cx="12" cy="16.2" rx="4.2" ry="4" />
  </svg>
);

const SigSocialIcon = ({ icon, label, href, kind, children }) => (
  <a href={href || '#'} aria-label={label} title={label}
    style={{
      width: 40, height: 40, display: 'inline-flex',
      alignItems: 'center', justifyContent: 'center',
      borderRadius: 2,
      border: '1px solid var(--t-line-on-navy)',
      background: 'transparent',
      color: 'var(--t-text-on-navy)',
      fontSize: 18, lineHeight: 1,
      borderBottom: '1px solid var(--t-line-on-navy)',
      transition: 'border-color 200ms, color 200ms',
    }}
    onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--t-accent-2)'; e.currentTarget.style.color = 'var(--t-accent-2)'; }}
    onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--t-line-on-navy)'; e.currentTarget.style.color = 'var(--t-text-on-navy)'; }}>
    {kind === 'custom' ? children : <i className={`ph ph-${icon}`}></i>}
  </a>
);

const SigAccessChip = ({ href }) => (
  <a href={href || '#'} aria-label="ACCESS™ — Cultural Commentary" title="ACCESS™"
    style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '0 14px', height: 40, borderRadius: 2,
      border: '1px solid var(--t-line-on-navy)',
      background: 'transparent', color: 'var(--t-text-on-navy)',
      borderBottom: '1px solid var(--t-line-on-navy)',
      fontFamily: 'var(--font-body)', fontWeight: 600,
      letterSpacing: '0.20em', fontSize: 11,
    }}>
    ACCESS<sup style={{ fontSize: 8, marginLeft: 1 }}>™</sup>
  </a>
);

const SigInstitutionChip = ({ href }) => (
  <a href={href || 'https://theartoflivingdigitally.com'}
    target="_blank" rel="noopener"
    aria-label="The Art of Living Digitally™" title="The Art of Living Digitally™"
    style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: 40, height: 40, borderRadius: 2,
      border: '1px solid var(--t-line-on-navy)',
      background: 'transparent',
      borderBottom: '1px solid var(--t-line-on-navy)',
    }}>
    <img src="assets/crest-institution-pearl.png" alt=""
      style={{ width: 28, height: 28, objectFit: 'contain', display: 'block', opacity: 0.9 }} />
  </a>
);

const SIG_SOCIAL_GROUPS = [
  { label: 'Learning & Community', items: [
    { kind: 'icon', icon: 'tiktok-logo',    label: 'TikTok' },
    { kind: 'icon', icon: 'instagram-logo', label: 'Instagram' },
    { kind: 'icon', icon: 'facebook-logo',  label: 'Facebook' },
    { kind: 'custom', custom: 'lemon8',     label: 'Lemon8' },
    { kind: 'icon', icon: 'pinterest-logo', label: 'Pinterest' },
    { kind: 'icon', icon: 'threads-logo',   label: 'Threads' },
  ] },
  { label: 'From the Institution', items: [
    { kind: 'institution', label: 'The Art of Living Digitally™' },
    { kind: 'access',      label: 'ACCESS™' },
  ] },
  { label: 'Building Journey', items: [
    { kind: 'icon', icon: 'linkedin-logo', label: 'LinkedIn' },
    { kind: 'icon', icon: 'x-logo',        label: 'Twitter / X' },
  ] },
];

// ─────────────────────────────────────────────────────────────
// SigUniversalFooter — the navy footer used on every Lifestyle
// landing page. Brought into the Signature Program page so the
// program closes on the same institutional ground.
// ─────────────────────────────────────────────────────────────
const SigUniversalFooter = () => (
  <footer style={{
    background: 'var(--t-navy)', color: 'var(--t-text-on-navy)',
    padding: '60px 24px 28px',
    borderTop: '1px solid var(--t-line-on-navy)',
  }}>
    <div>
      <p style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400,
        fontSize: 24, lineHeight: 1.3, color: 'var(--t-text-on-navy)',
        margin: 0, maxWidth: 360, letterSpacing: '-0.005em',
      }}>
        Skills + Lifestyle = Culture.<br />
        Welcome to The Tech Lifestyle.
      </p>
    </div>

    <hr style={{ border: 'none', borderTop: '1px solid var(--t-line-on-navy)', margin: '36px 0' }} />

    <div>
      <div style={{
        fontFamily: 'var(--font-body)', fontWeight: 600,
        fontSize: 10.5, letterSpacing: '0.22em', textTransform: 'uppercase',
        color: 'var(--t-accent-2)', marginBottom: 14,
      }}>Talk to us</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <a href="tel:+12254430137" style={{
          fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 26, lineHeight: 1.1, color: 'var(--t-text-on-navy)',
          borderBottom: 'none', letterSpacing: '-0.012em',
        }}>(225) 443·0137</a>
        <div style={{
          fontFamily: 'var(--font-body)', fontSize: 10, fontWeight: 600,
          letterSpacing: '0.18em',
          textTransform: 'uppercase', color: 'var(--t-text-on-navy-2)',
        }}>10 AM – 6 PM · CDT</div>
        <a href="mailto:LR@livingdigitally.co" style={{
          fontFamily: 'var(--font-body)', fontSize: 13,
          color: 'var(--t-text-on-navy)',
          borderBottom: '1px solid var(--t-accent-2)', paddingBottom: 1,
          alignSelf: 'flex-start',
        }}>LR@livingdigitally.co</a>
      </div>
    </div>

    <hr style={{ border: 'none', borderTop: '1px solid var(--t-line-on-navy)', margin: '36px 0' }} />

    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      {SIG_SOCIAL_GROUPS.map((g) => (
        <div key={g.label}>
          <div style={{
            fontFamily: 'var(--font-body)', fontWeight: 600,
            fontSize: 10.5, letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'var(--t-accent-2)', marginBottom: 12,
          }}>{g.label}</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center' }}>
            {g.items.map((it, i) => {
              if (it.kind === 'access') return <SigAccessChip key={i} />;
              if (it.kind === 'institution') return <SigInstitutionChip key={i} />;
              if (it.kind === 'custom' && it.custom === 'lemon8') {
                return <SigSocialIcon key={i} kind="custom" label={it.label}><Lemon8IconSig /></SigSocialIcon>;
              }
              return <SigSocialIcon key={i} icon={it.icon} label={it.label} />;
            })}
          </div>
        </div>
      ))}
    </div>

    <hr style={{ border: 'none', borderTop: '1px solid var(--t-line-on-navy)', margin: '36px 0 20px' }} />

    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
      gap: 16, flexWrap: 'wrap',
    }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ display: 'flex', gap: 14 }}>
          {['Privacy', 'Terms', 'About'].map((L) => (
            <a key={L} href="#" style={{
              fontFamily: 'var(--font-body)', fontWeight: 600,
              fontSize: 10, letterSpacing: '0.16em',
              textTransform: 'uppercase', color: 'var(--t-text-on-navy-2)',
              borderBottom: 'none',
            }}>{L}</a>
          ))}
        </div>
        <div style={{
          fontFamily: 'var(--font-body)', fontSize: 10,
          color: 'var(--t-text-on-navy-2)', opacity: 0.7, letterSpacing: '0.06em',
        }}>© 2026 The Art of Living Digitally™</div>
      </div>
      <div style={{
        fontFamily: 'var(--font-script)', fontWeight: 400,
        fontSize: 22, color: 'var(--t-accent-2)', lineHeight: 1,
      }}>Live It.</div>
    </div>
  </footer>
);

Object.assign(window, { SigUniversalFooter });