// destiny-chrome.jsx — Destiny Lifestyle page chrome.import DestinyHeader from './destiny-chrome'; // Or your exact local relative header file component
//
// Universal header (institutional crest tinted bronze + circle
// glyph + aqua "Become a Resident" pill) and universal footer
// (navy ground, matching every TAODL & Living Digitally™
// footer in the system).

// 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);
}

// ─────────────────────────────────────────────────────────────
// BronzeCrest — renders the institutional crest in the brand's
// dark bronze (#824807). Points at a pre-recolored PNG asset
// so the silhouette renders correctly in any capture surface
// (no filter chain, no mask-image trickery).
// ─────────────────────────────────────────────────────────────
const BronzeCrest = ({ size = 40, ariaLabel }) => (
  <img
    src="assets/crest-institution-darkbronze.png"
    alt={ariaLabel || ''}
    aria-hidden={ariaLabel ? undefined : 'true'}
    style={{
      display: 'block',
      width: size, height: size,
      objectFit: 'contain',
      flexShrink: 0,
    }}
  />
);

// Custom Lemon8 mark — Phosphor doesn't ship one.
const Lemon8IconDestiny = () => (
  <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>
);

// ─────────────────────────────────────────────────────────────
// DestinyHeader — bronze crest left, ✦ glyph + "Become a
// Resident" aqua pill right. Pearl ground.
// ─────────────────────────────────────────────────────────────
const DestinyHeader = () => (
  <header style={{
    position: 'sticky', top: 0, zIndex: 30,
    background: 'color-mix(in srgb, var(--t-ground) 94%, transparent)',
    borderBottom: '1px solid var(--t-line)',
    backdropFilter: 'saturate(1.1) blur(8px)',
  }}>
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '14px 22px', gap: 16,
    }}>
      <a href="#" aria-label="The Art of Living Digitally — home"
        style={{ display: 'flex', alignItems: 'center', borderBottom: 'none' }}>
        <BronzeCrest size={40} ariaLabel="The Art of Living Digitally" />
      </a>

      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <a href="#lifestyles" aria-label="Five Lifestyles"
          style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 34, height: 34, borderRadius: 999,
            border: '1px solid var(--t-line-strong)',
            color: 'var(--t-text)', borderBottom: '1px solid var(--t-line-strong)',
            fontSize: 14, lineHeight: 1, background: 'transparent',
          }}>✦</a>
        <a href="/signature-program" style={{
          fontFamily: 'var(--font-body)', fontWeight: 600,
          fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'var(--t-navy)',
          background: 'var(--t-accent)',
          padding: '10px 16px', borderRadius: 2, borderBottom: 'none',
          boxShadow: '0 0 18px color-mix(in srgb, var(--t-accent) 32%, transparent)',
        }}>Become a Resident</a>
      </div>
    </div>
  </header>
);

// ─────────────────────────────────────────────────────────────
// Footer primitives — navy ground, pearl text.
// ─────────────────────────────────────────────────────────────
const DestinySocialIcon = ({ 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)'; e.currentTarget.style.color = 'var(--t-accent)'; }}
    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 DestinyAccessChip = ({ 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 DestinyInstitutionChip = ({ 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 DESTINY_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' },
  ] },
];

// ─────────────────────────────────────────────────────────────
// DestinyFooter — universal navy footer.
// ─────────────────────────────────────────────────────────────
const DestinyFooter = () => (
  <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)', 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)', 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 }}>
      {DESTINY_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)', 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 <DestinyAccessChip key={i} />;
              if (it.kind === 'institution') return <DestinyInstitutionChip key={i} />;
              if (it.kind === 'custom' && it.custom === 'lemon8') {
                return <DestinySocialIcon key={i} kind="custom" label={it.label}><Lemon8IconDestiny /></DestinySocialIcon>;
              }
              return <DestinySocialIcon 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' }} />

    {/* Legal + Live It · matches the universal pattern across
        Brenda, Tamara, Jasmine — script in bronze (--t-gold). */}
    <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) => {
                    const paths = {
                      'Privacy': 'https://www.theartoflivingdigitally.com/privacy',
                      'Terms': 'https://www.theartoflivingdigitally.com/terms',
                      'About': 'https://www.theartoflivingdigitally.com'
                    };
                    return (
                      <a 
                        key={L} 
                        href={paths[L]} 
                        target="_blank" 
                        rel="noopener noreferrer" 
                        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>
        <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-gold)', lineHeight: 1,
      }}>Live It.</div>
  </footer>
);

Object.assign(window, { DestinyHeader, DestinyFooter, BronzeCrest });