// jasmine-chrome.jsx — Header (A: role-name chips · B: minimal + sheet link) + Universal Footer
// Shared between both homepage variants. Mobile-first.

// Inject Phosphor Icons stylesheet once — the design system nominates Phosphor
// Regular as the brand's UI icon set. Loaded from the official CDN.
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);
}

// Inline brand mark for Lemon8 (ByteDance). Phosphor doesn't ship a Lemon8
// glyph, so we render a custom SVG matching the official mark: a stylized
// "8" with a small leaf sprouting from the top loop (the lemon conceit).
// Drawn line-art to match the surrounding Phosphor Regular icons — 1.5
// stroke weight, rounded caps, monochrome currentColor so it inherits the
// footer's pearl + aqua-on-hover states.
const Lemon8Icon = () => (
  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"
    fill="none" stroke="currentColor" strokeWidth="1.5"
    strokeLinecap="round" strokeLinejoin="round">
    {/* Stalk — short line connecting the lemon top loop to its leaf */}
    <path d="M11.8 5.6 L10.7 3.6" />
    {/* Leaf — pointed almond shape angled up-left, like the official mark */}
    <path d="M10.7 3.6 C9.2 3.2 7.6 3.8 7.2 5 C8.7 5.4 10.3 4.8 10.7 3.6 Z" />
    {/* Top loop of the "8" — the lemon. Slightly smaller than the lower */}
    <circle cx="12" cy="9.5" r="3.4" />
    {/* Lower loop — slightly larger, lemon8 weighs the figure downward */}
    <circle cx="12" cy="16" r="4.1" />
  </svg>
);

const ROLE_NAMES = [
  { slug: 'brenda',  role: 'The Matriarch Upgrading' },
  { slug: 'keisha',  role: 'The Architect Mom' },
  { slug: 'tamara',  role: 'The Pivot' },
  { slug: 'jasmine', role: 'The Builder' },        // current
  { slug: 'destiny', role: 'The Quiet Riser' },
];

// ─────────────────────────────────────────────────────────────
// HeaderA — type-led variant. Wordmark left, full role-name nav as a
// horizontally-scrolling rail underneath on mobile. Role-name words stack
// vertically inside each chip so the rail stays narrow per role.
// ─────────────────────────────────────────────────────────────

const JasmineHeaderA = () => (
  <header style={{
    position: 'sticky', top: 0, zIndex: 30,
    background: 'rgba(251,246,236,0.96)',
    borderBottom: '1px solid var(--ld-line)',
    backdropFilter: 'saturate(1.1)',
  }}>
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '14px 20px', gap: 16,
    }}>
      <a href="/lifestyles/jasmine" style={{ display: 'flex', alignItems: 'center', gap: 9, borderBottom: 'none' }}>
        <img src="assets/monogram-ld-navy.png" alt="" style={{ height: 26 }} />
        <span style={{
          fontFamily: 'var(--font-display)', fontVariantCaps: 'all-small-caps',
          letterSpacing: '0.08em', fontSize: 16, fontWeight: 500, color: 'var(--ld-navy)',
        }}>Living Digitally<sup style={{ fontSize: 8, marginLeft: 1 }}>™</sup></span>
      </a>

      <a href="/signature-program" style={{
        fontSize: 10,
        letterSpacing: '0.18em',
        textTransform: 'uppercase',
        color: 'var(--ld-navy)',
        background: 'var(--ld-aqua)',
        padding: '8px 14px',
        borderRadius: 2,
        borderBottom: 'none',
      }}>Become a Resident</a>
    </div>

    {/* Role-name rail — vertically-stacked words per chip so it stays compact
        horizontally. Overflows right with a soft fade if needed. */}
    <div style={{ position: 'relative', borderTop: '1px solid var(--ld-line)' }}>
      <div className="role-rail" style={{
        display: 'flex', gap: 0, overflowX: 'auto', overflowY: 'hidden',
        padding: '14px 20px 16px', scrollbarWidth: 'none',
        alignItems: 'flex-start',
      }}>
        {ROLE_NAMES.map((r) => {
          const isCurrent = r.slug === 'jasmine';
          const words = r.role.split(' ');
          return (
            <a key={r.slug} href={`/lifestyles/${r.slug}`} style={{
              flex: '0 0 auto',
              fontFamily: 'var(--font-body)', fontWeight: isCurrent ? 700 : 500,
              fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase',
              color: isCurrent ? 'var(--ld-navy)' : 'var(--ld-ink-3)',
              padding: '4px 16px 8px 0',
              marginRight: 16,
              borderRight: '1px solid var(--ld-line)',
              borderBottom: 'none',
              whiteSpace: 'nowrap',
              position: 'relative',
              display: 'block',
              lineHeight: 1.45,
            }}>
              {words.map((w, i) => (
                <span key={i} style={{ display: 'block' }}>{w}</span>
              ))}
            </a>
          );
        })}
      </div>
    </div>
  </header>
);

// ─────────────────────────────────────────────────────────────
// HeaderB — image-led variant. Cleaner top bar; a single "Lifestyles" link
// scrolls to the dedicated editorial cross-nav section before the footer.
// ─────────────────────────────────────────────────────────────
const JasmineHeaderB = () => (
  <header style={{
    position: 'sticky', top: 0, zIndex: 30,
    background: 'rgba(251,246,236,0.92)',
    borderBottom: '1px solid var(--ld-line)',
    backdropFilter: 'saturate(1.1)',
  }}>
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '16px 20px', gap: 16,
    }}>
      {/* Brand mark only — the wordmark is intentionally absent on Builder's
          homepage so the masthead inside the cover does the brand work. */}
      {/* Institutional crest as the header brand mark — matches the navy
          crest beside "A note from the founder" so the two endpoints of the
          page bookend with the same institutional silhouette. */}
      <a href="#" aria-label="Living Digitally — home"
        style={{ display: 'flex', alignItems: 'center', borderBottom: 'none' }}>
        <img src="assets/crest-institution-navy.png" alt="Living Digitally"
          style={{ height: 38, width: 38, objectFit: 'contain', display: 'block' }} />
      </a>
      <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
        <a href="#lifestyles" aria-label="Welcome to the Tech Lifestyle" title="Welcome to the Tech Lifestyle"
          style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 32, height: 32, borderRadius: 999,
            border: '1px solid var(--ld-line)',
            color: 'var(--ld-navy)', borderBottom: '1px solid var(--ld-line)',
            fontSize: 14, lineHeight: 1,
            background: 'transparent',
          }}>✦</a>
        <a href="#enroll" style={{
          fontFamily: 'var(--font-body)', fontWeight: 600,
          fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: 'var(--ld-navy)',
          background: 'var(--ld-aqua)', padding: '8px 14px',
          borderRadius: 2, borderBottom: 'none',
        }}>Become a Resident</a>
      </div>
    </div>
  </header>
);

// ─────────────────────────────────────────────────────────────
// Small reusable icon-button for footer socials. Square hairline tile with
// the Phosphor glyph centered. Aqua border + glyph on hover.
// ─────────────────────────────────────────────────────────────
const SocialIcon = ({ 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(235,221,197,0.22)',
      background: 'transparent',
      color: 'var(--ld-pearl-100)',
      fontSize: 18, lineHeight: 1,
      borderBottom: '1px solid rgba(235,221,197,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(235,221,197,0.22)'; e.currentTarget.style.color = 'var(--ld-pearl-100)'; }}>
    {kind === 'custom' ? children : <i className={`ph ph-${icon}`}></i>}
  </a>
);

// ACCESS™ wordmark chip — used in the Cultural Commentary group. ACCESS is a
// publication, not a social platform, so it gets a wordmark glyph (not an icon).
const AccessChip = ({ 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(235,221,197,0.22)',
      background: 'transparent',
      color: 'var(--ld-pearl-100)',
      borderBottom: '1px solid rgba(235,221,197,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(235,221,197,0.22)'; e.currentTarget.style.color = 'var(--ld-pearl-100)'; }}>
    ACCESS<sup style={{ fontSize: 9, marginLeft: 1 }}>™</sup>
  </a>
);

// Institution chip — the Fleur-de-Lis + Acorn + Crown + Roots crest from
// the brand logo package, recolored to monochrome pearl so it sits uniform
// alongside the social-icon glyphs. Same 40px tile metrics as those.
// Links out to the institutional micro-site.
const InstitutionChip = ({ 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(235,221,197,0.22)',
      background: 'transparent',
      borderBottom: '1px solid rgba(235,221,197,0.22)',
      transition: 'border-color 200ms, background 200ms',
    }}
    onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--ld-aqua)'; }}
    onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(235,221,197,0.22)'; }}>
    {/* Pearl-recolored crest — already monochrome on a transparent ground,
        so it drops cleanly onto the navy footer tile and matches the line
        weight of the Phosphor social glyphs beside it. */}
    <img src="assets/crest-institution-pearl.png"
      alt=""
      style={{
        width: 30, height: 30,
        objectFit: 'contain',
        display: 'block',
      }} />
  </a>
);

// ─────────────────────────────────────────────────────────────
// JasmineFooter — universal across all 5 Lifestyles. Navy ground, gold
// labels, pearl type, three social groupings, contact block, brand links.
// Socials render as icon tiles (Phosphor Regular). ACCESS™ renders as a
// wordmark chip; the institutional crest renders as an image-tile chip;
// both live inside the "From the Institution" group.
// ─────────────────────────────────────────────────────────────
const 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' },
  ] },
  // Renamed from "Cultural Commentary" — the institutional crest + ACCESS™
  // both sit under this group as voices issued by The Art of Living
  // Digitally™ as an institution.
  { 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' },
  ] },
];

const JasmineFooter = () => (
  <footer data-ground="navy" style={{
    background: 'var(--ld-navy)', color: 'var(--ld-pearl-100)',
    padding: '56px 24px 28px',
  }}>
    {/* Wordmark removed per direction. The closing italic line carries the
        sign-off on its own; the wordmark is held only by the header now. */}
    <div>
      <p style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400,
        fontSize: 19, lineHeight: 1.45, color: 'var(--ld-pearl-100)',
        margin: 0, maxWidth: 360,
      }}>
        Skills + Lifestyle = Culture.<br />
        Welcome to The Tech Lifestyle.
      </p>
    </div>

    <hr style={{ border: 'none', borderTop: '1px solid rgba(235,221,197,0.18)', margin: '40px 0' }} />

    {/* Contact */}
    <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(--ld-pearl-100)',
          borderBottom: 'none',
        }}>(225) 443·0137</a>
        <div style={{
          fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.14em',
          textTransform: 'uppercase', color: 'rgba(235,221,197,0.55)',
        }}>10 AM – 6 PM · CDT</div>
        <a href="mailto:LR@livingdigitally.co" style={{
          fontFamily: 'var(--font-body)', fontSize: 14,
          color: 'var(--ld-pearl-100)', borderBottom: '1px solid var(--ld-gold)',
          paddingBottom: 1, alignSelf: 'flex-start',
        }}>LR@livingdigitally.co</a>
        <a href="#contact" style={{
          fontFamily: 'var(--font-body)', fontSize: 13,
          color: 'rgba(235,221,197,0.75)', borderBottom: 'none',
          paddingTop: 4,
        }}>Or write us a longer note →</a>
      </div>
    </div>

    <hr style={{ border: 'none', borderTop: '1px solid rgba(235,221,197,0.18)', margin: '40px 0' }} />

    {/* Social groups — icon tiles */}
    <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
      {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 <AccessChip key={i} />;
              if (it.kind === 'institution') return <InstitutionChip key={i} />;
              if (it.kind === 'custom' && it.custom === 'lemon8') {
                return <SocialIcon key={i} kind="custom" label={it.label}><Lemon8Icon /></SocialIcon>;
              }
              return <SocialIcon key={i} icon={it.icon} label={it.label} />;
            })}
          </div>
        </div>
      ))}
    </div>

    {/* "About The Art of Living Digitally™" link removed from this row —
        the institutional gateway now lives as the crest tile inside the
        "From the Institution" group above. The hairline below is kept so
        the footer rhythm doesn't collapse without it. */}

    <hr style={{ border: 'none', borderTop: '1px solid rgba(235,221,197,0.18)', 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: 'rgba(235,221,197,0.55)', borderBottom: 'none', fontFamily: 'var(--font-body)' }}>Privacy</a>
          <a href="https://www.theartoflivingdigitally.com/terms" target="_blank" rel="noopener noreferrer" style={{ color: 'rgba(235,221,197,0.55)', borderBottom: 'none', fontFamily: 'var(--font-body)' }}>Terms</a>
        </div>
        <div style={{
          fontFamily: 'var(--font-body)', fontSize: 10,
          color: 'rgba(235,221,197,0.4)', letterSpacing: '0.04em',
        }}>© 2026 The Art of Living Digitally™</div>
      </div>
      <div style={{
        fontFamily: 'var(--font-script)', fontSize: 22,
        color: 'var(--ld-gold)', lineHeight: 1,
      }}>Live It.</div>
    </div>
  </footer>
);

Object.assign(window, { JasmineHeaderA, JasmineHeaderB, JasmineFooter, SocialIcon, AccessChip, InstitutionChip });