// sig-chrome.jsx — 7 Days of Living Digitally™ · Signature Program
// Universal header + footer.
//
// Header CTA options (tweak: headerCta):
//   reserve   — "Reserve Your Seat →"   (default — direct, action-led)
//   enroll    — "Enroll Now"            (classic, institutional)
//   walk-in   — "Walk In →"             (program's own voice)
//
// Footer options (tweak: footer):
//   hairline  — minimal hairline + wordmark + tagline
//   institutional — full institutional crest tile + 5 Lifestyles nav
//   billboard — cinematic close (navy, aqua glow, the final marquee)

const HEADER_CTA_LABELS = {
  reserve: 'Become A Resident',
  enroll:  'Enroll Now',
  'walk-in': 'Walk In',
};

// PearlCrest — the institutional crest mark, pearl tone, sized
// to match the Lifestyle landing-page header.
const PearlCrest = ({ size = 40, ariaLabel }) => (
  <img
    src="assets/crest-institution-pearl.png"
    alt={ariaLabel || ''}
    aria-hidden={ariaLabel ? undefined : 'true'}
    style={{
      display: 'block',
      width: size, height: size,
      objectFit: 'contain',
      flexShrink: 0,
    }}
  />
);

// ─────────────────────────────────────────────────────────────
// SigHeader — institutional wordmark left, lifestyles nav center,
// aqua "Reserve / Enroll / Walk In" CTA right. Sticky.
// ─────────────────────────────────────────────────────────────
const SigHeader = ({ ctaVariant = 'reserve' }) => {
  const label = HEADER_CTA_LABELS[ctaVariant] || HEADER_CTA_LABELS.reserve;
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 30,
      background: 'color-mix(in srgb, var(--ld-navy) 94%, transparent)',
      borderBottom: '1px solid rgba(95,224,230,0.18)',
      backdropFilter: 'blur(10px)',
      WebkitBackdropFilter: 'blur(10px)',
      padding: '14px 32px',
    }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
      }}>
        {/* LEFT — institutional crest, matching the Lifestyle headers */}
        <a href="/" aria-label="The Art of Living Digitally — home"
          style={{ display: 'flex', alignItems: 'center', borderBottom: 'none' }}>
          <PearlCrest size={40} ariaLabel="The Art of Living Digitally" />
        </a>

        {/* CENTER — lifestyle nav (hides on mobile) */}
        <nav style={{
          display: 'flex', alignItems: 'center', gap: 26,
          fontFamily: 'var(--font-body)', fontWeight: 600,
          fontSize: 10.5, letterSpacing: '0.22em', textTransform: 'uppercase',
        }} className="sig-header-nav">
          {[
            { href: '#countdown', label: 'The Countdown' },
            { href: '#doorways',  label: 'Three Doorways' },
            { href: '#core',      label: 'Core Curriculum' },
            { href: '#welcome',   label: 'The Tech Lifestyle' },
          ].map((l) => (
            <a key={l.href} href={l.href} style={{
              color: 'rgba(235,221,197,0.78)', borderBottom: 'none',
              transition: 'color 180ms ease',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--ld-aqua)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.color = 'rgba(235,221,197,0.78)'; }}
            >{l.label}</a>
          ))}
        </nav>

        {/* RIGHT — aqua CTA */}
        <a href="https://connect.livingdigitally.co/" style={{
          fontFamily: 'var(--font-body)', fontWeight: 700,
          fontSize: 10.5, letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'var(--ld-navy)',
          background: 'var(--ld-aqua)',
          padding: '11px 18px', borderRadius: 2, borderBottom: 'none',
          boxShadow: '0 0 22px rgba(95,224,230,0.32)',
          whiteSpace: 'nowrap',
        }}>{label} →</a>
      </div>
    </header>
  );
};

// ─────────────────────────────────────────────────────────────
// SigFooter — three variants.
// ─────────────────────────────────────────────────────────────
// Universal Footer — same pattern as every Lifestyle landing page.
// Navy ground, pearl text, aqua eyebrow accents, gold script
// "Live It." mark. Built on --ld-* tokens.
// ─────────────────────────────────────────────────────────────

// Phosphor Icons stylesheet — singleton-load (mirrors Lifestyle pages).
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);
}

const LINE_ON_NAVY = 'rgba(235,221,197,0.18)';
const TEXT_ON_NAVY_2 = 'rgba(235,221,197,0.7)';

const Lemon8Icon = () => (
  <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 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 ' + LINE_ON_NAVY,
      background: 'transparent',
      color: 'var(--ld-pearl-100)',
      fontSize: 18, lineHeight: 1,
      borderBottom: '1px solid ' + LINE_ON_NAVY,
      transition: 'border-color 200ms, color 200ms',
    }}
    onMouseEnter={(e) => {
      e.currentTarget.style.borderColor = 'var(--ld-aqua)';
      e.currentTarget.style.color = 'var(--ld-aqua)';
    }}
    onMouseLeave={(e) => {
      e.currentTarget.style.borderColor = LINE_ON_NAVY;
      e.currentTarget.style.color = 'var(--ld-pearl-100)';
    }}>
    {kind === 'custom' ? children : <i className={`ph ph-${icon}`}></i>}
  </a>
);

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 ' + LINE_ON_NAVY,
      background: 'transparent', color: 'var(--ld-pearl-100)',
      borderBottom: '1px solid ' + LINE_ON_NAVY,
      fontFamily: 'var(--font-body)', fontWeight: 600,
      letterSpacing: '0.20em', fontSize: 11,
    }}>
    ACCESS<sup style={{ fontSize: 8, marginLeft: 1 }}>™</sup>
  </a>
);

const InstitutionChip = ({ 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 ' + LINE_ON_NAVY,
      background: 'transparent',
      borderBottom: '1px solid ' + 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 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' },
  ] },
];

const SigFooter = () => (
  <footer style={{
    background: 'var(--ld-navy)', color: 'var(--ld-pearl-100)',
    padding: '60px 24px 28px',
    borderTop: '1px solid ' + LINE_ON_NAVY,
  }}>
    <div>
      <p style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400,
        fontSize: 24, lineHeight: 1.3, color: 'var(--ld-pearl-100)',
        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 ' + 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(--ld-aqua)', 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(--ld-pearl-100)',
          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: 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(--ld-pearl-100)',
          borderBottom: '1px solid var(--ld-aqua)', paddingBottom: 1,
          alignSelf: 'flex-start',
        }}>LR@livingdigitally.co</a>
      </div>
    </div>

    <hr style={{ border: 'none', borderTop: '1px solid ' + LINE_ON_NAVY, margin: '36px 0' }} />

    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      {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: 12,
          }}>{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>

    <hr style={{ border: 'none', borderTop: '1px solid ' + LINE_ON_NAVY, margin: '36px 0 20px' }} />

    {/* Legal + Live It script — universal pattern */}
    <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: TEXT_ON_NAVY_2,
              borderBottom: 'none',
            }}>{L}</a>
          ))}
        </div>
        <div style={{
          fontFamily: 'var(--font-body)', fontSize: 10,
          color: TEXT_ON_NAVY_2, opacity: 0.7, letterSpacing: '0.06em',
        }}>© {new Date().getFullYear()} The Art of Living Digitally™</div>
      </div>
      <div style={{
        fontFamily: 'var(--font-script)', fontWeight: 400,
        fontSize: 22, color: 'var(--ld-gold)', lineHeight: 1,
      }}>Live It.</div>
    </div>
  </footer>
);

Object.assign(window, { SigHeader, SigFooter });