// tamara-chrome.jsx — Tamara Lifestyle page chrome.
// Universal header (institutional crest + Become a Resident pill) and
// universal footer (Skills + Lifestyle = Culture · contact · social
// groups · legal). Identical contract to Brenda's chrome; the visual
// adapts to whichever palette the page is rendered in via the
// --t-* tokens defined in colors_and_type.css.
//
// Why palette-aware: the design canvas renders Tamara's page across
// three palette artboards. The header and footer have to inherit
// the palette so the artboards read as coherent pages, not as
// matching bodies stapled to a single chrome.

// ─────────────────────────────────────────────────────────────
// Phosphor icon stylesheet — singleton-load so multiple Tamara
// artboards on the design canvas don't each inject their own link.
// ─────────────────────────────────────────────────────────────
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. Stroke-weight tuned
// to match the surrounding line glyphs so the footer reads as one set.
const Lemon8IconTamara = () => (
  <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>
);

// ─────────────────────────────────────────────────────────────
// TamaraHeader — sticky, palette-aware. Crest left, diamond glyph +
// "Become a Resident" pill right. Matches the universal pattern set
// by Jasmine + Brenda; tone of the chrome shifts subtly with the
// palette (the pill stays aqua — the brand-carrier accent — but
// the ground and hairlines inherit --t-ground / --t-line).
// ─────────────────────────────────────────────────────────────
const TamaraHeader = () => (
  <header style={{
    position: 'sticky', top: 0, zIndex: 30,
    background: 'color-mix(in srgb, var(--t-ground) 96%, transparent)',
    borderBottom: '1px solid var(--t-line)',
    backdropFilter: 'saturate(1.1)',
  }}>
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '14px 20px', gap: 16,
    }}>
      <a href="#" aria-label="The Art of Living Digitally — home"
        style={{ display: 'flex', alignItems: 'center', borderBottom: 'none' }}>
        <img src="assets/crest-institution-navy.png" alt="The Art of Living Digitally"
          style={{ height: 36, width: 'auto', display: 'block' }} />
      </a>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <a href="#lifestyles" aria-label="Five Lifestyles" title="Five Lifestyles"
          style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 32, height: 32, borderRadius: 999,
            border: '1px solid var(--t-line)',
            color: 'var(--t-text)', borderBottom: '1px solid var(--t-line)',
            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(--ld-navy)',
          background: 'var(--ld-aqua)',
          padding: '9px 16px', borderRadius: 2, borderBottom: 'none',
        }}>Become a Resident</a>
      </div>
    </div>
  </header>
);

// ─────────────────────────────────────────────────────────────
// Social tile primitives — used in the footer. Identical metrics
// to Brenda's footer tiles so the system reads as one footer
// across every Lifestyle page.
// ─────────────────────────────────────────────────────────────
const TamaraSocialIcon = ({ 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 rgba(244,235,217,0.22)',
      background: 'transparent',
      color: 'var(--t-text-on-dark)',
      fontSize: 18, lineHeight: 1,
      borderBottom: '1px solid rgba(244,235,217,0.22)',
      transition: 'border-color 200ms, color 200ms, background 200ms',
    }}
    onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--ld-aqua)'; e.currentTarget.style.color = 'var(--ld-aqua)'; }}
    onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(244,235,217,0.22)'; e.currentTarget.style.color = 'var(--t-text-on-dark)'; }}>
    {kind === 'custom' ? children : <i className={`ph ph-${icon}`}></i>}
  </a>
);

const TamaraAccessChip = ({ 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 rgba(244,235,217,0.22)',
      background: 'transparent', color: 'var(--t-text-on-dark)',
      borderBottom: '1px solid rgba(244,235,217,0.22)',
      transition: 'border-color 200ms, color 200ms',
      fontFamily: 'var(--font-display)',
      fontVariantCaps: 'all-small-caps', letterSpacing: '0.14em',
      fontSize: 15, fontWeight: 500,
    }}
    onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--ld-aqua)'; e.currentTarget.style.color = 'var(--ld-aqua)'; }}
    onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(244,235,217,0.22)'; e.currentTarget.style.color = 'var(--t-text-on-dark)'; }}>
    ACCESS<sup style={{ fontSize: 9, marginLeft: 1 }}>™</sup>
  </a>
);

const TamaraInstitutionChip = ({ href }) => (
  <a href={href || 'https://theartoflivingdigitally.com'}
    target="_blank" rel="noopener"
    aria-label="The Art of Living Digitally™ — institutional website"
    title="The Art of Living Digitally™"
    style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: 40, height: 40, borderRadius: 2,
      border: '1px solid rgba(244,235,217,0.22)',
      background: 'transparent',
      borderBottom: '1px solid rgba(244,235,217,0.22)',
      transition: 'border-color 200ms',
    }}
    onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--ld-aqua)'; }}
    onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(244,235,217,0.22)'; }}>
    <img src="assets/crest-institution-pearl.png" alt=""
      style={{ width: 30, height: 30, objectFit: 'contain', display: 'block' }} />
  </a>
);

// Social-link groupings per the brief: Learning & Community, From the
// Institution, Building Journey. Twitter/X is "Cultural Commentary"
// and lives in the Institution row alongside ACCESS — same as Brenda.
const TAMARA_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' },
  ] },
];

// ─────────────────────────────────────────────────────────────
// TamaraFooter — universal navy ground. The accent that calls
// attention here is the editorial accent (oxblood / teal / bronze)
// for the small caps category labels — that's the only "tell" of
// the palette inside the otherwise universal footer.
// ─────────────────────────────────────────────────────────────
const TamaraFooter = () => (
  <footer style={{
    background: 'var(--t-structure)', color: 'var(--t-text-on-dark)',
    padding: '56px 24px 28px',
  }}>
    <div>
      <p style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400,
        fontSize: 19, lineHeight: 1.45, color: 'var(--t-text-on-dark)',
        margin: 0, maxWidth: 360,
      }}>
        Skills + Lifestyle = Culture.<br />
        Welcome to The Tech Lifestyle.
      </p>
    </div>

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

    <div>
      <div style={{
        fontFamily: 'var(--font-body)', fontWeight: 600,
        fontSize: 10.5, letterSpacing: '0.22em', textTransform: 'uppercase',
        color: 'var(--ld-aqua)', marginBottom: 16,
      }}>Talk to us</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <a href="tel:+12254430137" style={{
          fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 24, lineHeight: 1.1, color: 'var(--t-text-on-dark)',
          borderBottom: 'none',
        }}>(225) 443·0137</a>
        <div style={{
          fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.14em',
          textTransform: 'uppercase', color: 'var(--t-text-on-dark-2)', opacity: 0.7,
        }}>10 AM – 6 PM · CDT</div>
        <a href="mailto:LR@livingdigitally.co" style={{
          fontFamily: 'var(--font-body)', fontSize: 14,
          color: 'var(--t-text-on-dark)', borderBottom: '1px solid var(--ld-aqua)',
          paddingBottom: 1, alignSelf: 'flex-start',
        }}>LR@livingdigitally.co</a>
        <a href="#contact" style={{
          fontFamily: 'var(--font-body)', fontSize: 13,
          color: 'var(--t-text-on-dark-2)', borderBottom: 'none', paddingTop: 4,
        }}>Or write us a longer note →</a>
      </div>
    </div>

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

    <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
      {TAMARA_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(--ld-aqua)', marginBottom: 14,
          }}>{g.label}</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center' }}>
            {g.items.map((it, i) => {
              if (it.kind === 'access') return <TamaraAccessChip key={i} />;
              if (it.kind === 'institution') return <TamaraInstitutionChip key={i} />;
              if (it.kind === 'custom' && it.custom === 'lemon8') {
                return <TamaraSocialIcon key={i} kind="custom" label={it.label}><Lemon8IconTamara /></TamaraSocialIcon>;
              }
              return <TamaraSocialIcon key={i} icon={it.icon} label={it.label} />;
            })}
          </div>
        </div>
      ))}
    </div>

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

    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 16 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ display: 'flex', gap: 14, fontSize: 11 }}>
          <a href="https://www.theartoflivingdigitally.com/privacy" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--t-text-on-dark-2)', opacity: 0.7, borderBottom: 'none', fontFamily: 'var(--font-body)' }}>Privacy</a>
         <a href="https://www.theartoflivingdigitally.com/terms" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--t-text-on-dark-2)', opacity: 0.7, borderBottom: 'none', fontFamily: 'var(--font-body)' }}>Terms</a>
        </div>
        <div style={{
          fontFamily: 'var(--font-body)', fontSize: 10,
          color: 'var(--t-text-on-dark-2)', opacity: 0.55, letterSpacing: '0.04em',
        }}>© 2026 The Art of Living Digitally™</div>
      </div>
      <div style={{
        fontFamily: 'var(--font-script)', fontSize: 22,
        color: 'var(--t-accent-2)', lineHeight: 1,
      }}>Live It.</div>
    </div>
  </footer>
);

Object.assign(window, { TamaraHeader, TamaraFooter });