/* ============================================================
   SITE CHROME - shared header + footer with real hash-routed links
   ============================================================ */

const navTo = (path) => {
  window.location.hash = path;
  window.scrollTo({ top: 0, behavior: 'instant' });
};

const SiteLink = ({ to, children, style, className }) => {
  const target = to == null ? '' : String(to);
  const isExternal = /^(https?:\/\/|mailto:|tel:)/i.test(target);
  const isPlaceholder = target === '' || target === '#';
  // External (mailto / http) - open as a normal link, never route it.
  if (isExternal) {
    const newTab = /^https?:\/\//i.test(target);
    return (
      <a href={target} className={className} style={{ cursor: 'pointer', ...style }}
         {...(newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>{children}</a>
    );
  }
  // Placeholder (no destination yet) - do nothing instead of 404-ing.
  if (isPlaceholder) {
    return (
      <a href="#" onClick={(e) => e.preventDefault()} aria-disabled="true"
         className={className} style={{ cursor: 'pointer', ...style }}>{children}</a>
    );
  }
  // Internal hash route.
  return (
    <a href={`#${target}`} onClick={(e) => { e.preventDefault(); navTo(target); }}
       className={className} style={{ cursor: 'pointer', ...style }}>{children}</a>
  );
};

const SiteHeader = ({ active }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const LINKS = [
    ['/patterns', 'patterns', 'The patterns'],
    ['/coursework', 'coursework', 'Coursework'],
    ['/community', 'community', 'Community'],
    ['/manifesto', 'manifesto', 'Our story'],
    ['/pricing', 'pricing', 'Pricing'],
    ['/quiz', 'quiz', 'Pattern quiz'],
  ];
  const go = (to) => { setMenuOpen(false); navTo(to); };
  return (
  <>
    <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '24px 56px', borderBottom: '1px solid #1c1c1c', background: '#f4f1eb', position: 'sticky', top: 0, zIndex: 50 }}>
      <SiteLink to="/" style={{ display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none', color: 'inherit' }}>
        <Mark size={28} color="#1a6b5a" />
        <Wordmark size={20} />
      </SiteLink>
      <nav className="etp-nav" style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
        {[
          ['/patterns', 'patterns', 'The patterns'],
          ['/coursework', 'coursework', 'Coursework'],
          ['/manifesto', 'manifesto', 'Our story'],
          ['/pricing', 'pricing', 'Pricing'],
          ['/quiz', 'quiz', 'Pattern quiz'],
        ].map(([to, k, l]) => (
          <SiteLink key={k} to={to} className="label" style={{
            color: active === k ? '#1a6b5a' : '#1c1c1c',
            textDecoration: 'none',
            whiteSpace: 'nowrap',
            paddingBottom: 4,
            borderBottom: active === k ? '2px solid #1a6b5a' : '2px solid transparent',
          }}>{l}</SiteLink>
        ))}
        <SiteLink to="/reserve" className="etp-btn etp-btn-orange" style={{ padding: '12px 20px', textDecoration: 'none' }}>Reserve a founding seat →</SiteLink>
      </nav>
      {/* Compact action - shown only below 1024px (see responsive.css) */}
      <div className="etp-header-actions" style={{ display: 'none', alignItems: 'center' }}>
        <button onClick={() => setMenuOpen(true)} aria-label="Open menu" className="label" style={{ background: 'none', border: '1px solid #1c1c1c', padding: '11px 18px', cursor: 'pointer', color: '#1c1c1c' }}>Menu</button>
      </div>
    </header>

    <div style={{ background: '#1c1c1c', color: '#f4f1eb', padding: '10px 56px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, fontSize: 11.5, fontFamily: "'DM Mono', monospace", textTransform: 'uppercase', letterSpacing: '0.07em', overflow: 'hidden' }}>
      <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>● Founding 500 — opening soon</span>
      <span style={{ color: '#d4883a', whiteSpace: 'nowrap', flexShrink: 0 }}>Reserve now - pay nothing today</span>
    </div>

    {menuOpen && (
      <div role="dialog" aria-label="Menu" style={{ position: 'fixed', inset: 0, zIndex: 200, background: '#1c1c1c', color: '#f4f1eb', display: 'flex', flexDirection: 'column', padding: '20px 24px 32px', overflowY: 'auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 36 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <Mark size={26} color="#2a9e85" />
            <Wordmark size={18} dark />
          </div>
          <button onClick={() => setMenuOpen(false)} aria-label="Close menu" className="label" style={{ background: 'none', border: '1px solid #f4f1eb', padding: '10px 14px', cursor: 'pointer', color: '#f4f1eb' }}>Close ✕</button>
        </div>
        <nav style={{ display: 'flex', flexDirection: 'column' }}>
          {LINKS.map(([to, k, l], i) => (
            <a key={k} href={`#${to}`} onClick={(e) => { e.preventDefault(); go(to); }} style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
              padding: '18px 0', borderBottom: '1px solid #444', textDecoration: 'none',
              color: active === k ? '#d4883a' : '#f4f1eb',
            }}>
              <span style={{ fontSize: 30, fontWeight: 700, letterSpacing: '-0.02em', textTransform: 'uppercase', lineHeight: 1 }}>{l}</span>
              <span className="label" style={{ color: '#d4883a' }}>{String(i + 1).padStart(2, '0')}</span>
            </a>
          ))}
        </nav>
        <button onClick={() => go('/reserve')} className="etp-btn etp-btn-orange" style={{ marginTop: 32, padding: '18px 24px', fontSize: 15 }}>Reserve a founding seat →</button>
        <div className="label" style={{ color: '#d4883a', textAlign: 'center', marginTop: 28 }}>See it. Name it. Stop it.</div>
      </div>
    )}
  </>
  );
};

const SiteFooter = () => (
  <footer style={{ background: '#1c1c1c', color: '#f4f1eb', padding: '56px 56px 32px' }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 56 }}>
      <SiteLink to="/" style={{ display: 'flex', alignItems: 'center', gap: 16, textDecoration: 'none', color: 'inherit' }}>
        <Mark size={36} color="#2a9e85" />
        <Wordmark size={26} dark />
      </SiteLink>
      <div className="label" style={{ color: '#d4883a' }}>See it. Name it. Stop it.</div>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32, marginBottom: 56 }}>
      {[
        ['The work', [['/quiz', 'Pattern quiz'], ['/patterns', 'The 5 patterns'], ['/coursework', 'Coursework'], ['/community', 'Community']]],
        ['How it works', [['/coursework', 'The coursework'], ['/community', 'Community'], ['/pricing', 'Pricing'], ['/faq', 'FAQ']]],
        ['About', [['/manifesto', 'Our story'], ['/privacy', 'Privacy']]],
        ['Connect', [['mailto:endthepattern@outlook.com', 'endthepattern@outlook.com']]],
      ].map(([h, links]) => (
        <div key={h}>
          <div className="label" style={{ color: '#d4883a', marginBottom: 16 }}>{h}</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {links.map(([to, l]) => <SiteLink key={l} to={to} style={{ fontSize: 14, color: '#f4f1eb', textDecoration: 'none', opacity: 0.85 }}>{l}</SiteLink>)}
          </div>
        </div>
      ))}
    </div>
    <div style={{ paddingTop: 24, borderTop: '1px solid #444', marginBottom: 24 }}>
      <p style={{ fontSize: 13, lineHeight: 1.6, opacity: 0.75, margin: 0, maxWidth: 640 }}>
        In crisis? Call or text <a href="tel:988" style={{ color: '#d4883a', textDecoration: 'none', fontWeight: 600 }}>988</a> (US) or find your local line at <a href="https://findahelpline.com" target="_blank" rel="noopener noreferrer" style={{ color: '#d4883a', textDecoration: 'none', fontWeight: 600 }}>findahelpline.com</a>. This site can wait. End the Pattern is community work alongside therapy — never a replacement for clinical care.
      </p>
    </div>
    <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 24, borderTop: '1px solid #444' }}>
      <div className="label" style={{ opacity: 0.6 }}>© 2026 End the Pattern</div>
      <div className="label" style={{ opacity: 0.6 }}>endthepattern.com</div>
    </div>
  </footer>
);

// Shared pattern data - used across pages
const PB_PATTERNS = [
  {
    slug: 'peacekeeper',
    num: '01',
    name: 'The Peacekeeper',
    pct: '32%',
    one: 'Manages everyone else\'s emotions before noticing their own.',
    body: 'You learned to manage everyone else\'s emotions before you knew you had your own. You read rooms before you read yourself. The cost is your nervous system, your boundaries, and the version of you that never got to develop preferences.',
    costs: [
      'You read rooms before you read yourself.',
      'You can\'t tell tired from depleted from done.',
      'Conflict registers as catastrophic before it\'s real.',
    ],
    stops: 'I tend my own weather first.',
    body_lives: 'Throat, jaw, shoulders',
    misread: 'Personality, virtue, "being a good kid"',
    work6: [
      ['Wk 01 - See it', 'Notice the room-reading reflex. Don\'t interrupt it yet.'],
      ['Wk 02 - Trace it', 'Identify the parent whose nervous system you regulated.'],
      ['Wk 03 - Feel it', 'The feeling underneath the managing is usually anger.'],
      ['Wk 04 - Interrupt', '"Let me sit with that before I respond."'],
      ['Wk 05 - Repair', '"I was managing you. I\'m sorry. I\'m not doing it now."'],
      ['Wk 06 - Build', '"I tend my own weather first."'],
    ],
  },
  {
    slug: 'performer',
    num: '02',
    name: 'The Performer',
    pct: '24%',
    one: 'Achievement as oxygen. Worth must be re-earned daily.',
    body: 'You learned that love came with metrics. So you produce. You finish the project, win the praise, and feel nothing for fourteen seconds before the next deadline arrives. The cost is rest. The cost is being known when you\'re ordinary.',
    costs: [
      'Rest feels like a debt accruing.',
      'Praise dissolves the moment it lands.',
      'Stillness registers as failure.',
    ],
    stops: 'I\'m worth the rest I haven\'t earned.',
    body_lives: 'Chest, upper back, hands',
    misread: 'Ambition, drive, "high-functioning"',
    work6: [
      ['Wk 01 - See it', 'Notice the output reflex - the alarm that rings when you rest.'],
      ['Wk 02 - Trace it', 'Identify where love first came with metrics attached.'],
      ['Wk 03 - Feel it', 'The feeling underneath the producing is usually fear.'],
      ['Wk 04 - Interrupt', 'One thing done at 80%, on purpose. Notice the alarm. Don\'t obey it.'],
      ['Wk 05 - Repair', '"I performed for you instead of being with you. I\'m here now."'],
      ['Wk 06 - Build', '"I\'m worth the rest I haven\'t earned."'],
    ],
  },
  {
    slug: 'vault',
    num: '03',
    name: 'The Vault',
    pct: '18%',
    one: 'Feelings filed under "later." Later never comes.',
    body: 'You grew up in a house where feelings were forbidden, dangerous, or expensive. So you learned to compress them. Not bury - compress. They live in the jaw, the chest, the gut. They are still there. They are heavier than you remember.',
    costs: [
      'You can name the event. You can\'t name the feeling.',
      'The body registers what the mouth won\'t.',
      'Closeness arrives and you go quiet.',
    ],
    stops: 'I notice. I name. I let it be known.',
    body_lives: 'Stomach, jaw, sternum',
    misread: 'Stoicism, calm, "the steady one"',
    work6: [
      ['Wk 01 - See it', 'Notice the filing reflex - the instant a feeling gets shelved for later.'],
      ['Wk 02 - Trace it', 'Identify the house where feelings were forbidden, dangerous, or expensive.'],
      ['Wk 03 - Feel it', 'Name one bodily cue out loud, three times a day. "My chest is tight."'],
      ['Wk 04 - Interrupt', '"Give me a second - something is coming up."'],
      ['Wk 05 - Repair', '"You asked what I felt and I said \'fine.\' Here is the truer answer."'],
      ['Wk 06 - Build', '"I notice. I name. I let it be known."'],
    ],
  },
  {
    slug: 'forecaster',
    num: '04',
    name: 'The Forecaster',
    pct: '14%',
    one: 'Anxiety dressed as preparation. Always one disaster ahead.',
    body: 'You grew up where surprise meant pain. So you learned to scan, to predict, to prepare for the worst possible version of every room. It looks like competence. It feels like exhaustion. The body never gets the message that the threat is over.',
    costs: [
      'Rest looks like reckless to you.',
      'You rehearse arguments that haven\'t happened.',
      'Other people experience your worry as control.',
    ],
    stops: 'I am here, in this room, with these people.',
    body_lives: 'Stomach, neck, the space behind the eyes',
    misread: 'Conscientiousness, planning, "being prepared"',
    work6: [
      ['Wk 01 - See it', 'Notice the scan. Count the arguments you rehearse that never arrive.'],
      ['Wk 02 - Trace it', 'Identify where surprise first meant pain.'],
      ['Wk 03 - Feel it', 'The feeling underneath the forecasting is usually helplessness.'],
      ['Wk 04 - Interrupt', '"That\'s a forecast, not a fact."'],
      ['Wk 05 - Repair', '"My worry landed on you as control. I\'m practicing staying here."'],
      ['Wk 06 - Build', '"I am here, in this room, with these people."'],
    ],
  },
  {
    slug: 'disappearer',
    num: '05',
    name: 'The Disappearer',
    pct: '12%',
    one: 'Conflict ends the relationship. So does almost everything else.',
    body: 'A caregiver left first - physically, emotionally, attentionally. You learned that leaving is what you do before you\'re left. So you ghost. You shut down. You decide it\'s over before it gets the chance to be hard. The cost is everyone you didn\'t stay for.',
    costs: [
      'You\'ve ended things you didn\'t want to end.',
      'Repair feels like surrender.',
      'You confuse exit with autonomy.',
    ],
    stops: 'I stay. Especially when it\'s hard.',
    body_lives: 'Lower back, hips, soles of feet',
    misread: 'Independence, low-maintenance, "easy"',
    work6: [
      ['Wk 01 - See it', 'Notice the exit reflex - the escape plan forming before anything is wrong.'],
      ['Wk 02 - Trace it', 'Identify who left first, and how you learned to beat them to the door.'],
      ['Wk 03 - Feel it', 'The feeling underneath the leaving is usually grief.'],
      ['Wk 04 - Interrupt', 'Stay sixty seconds past the urge. Text back the same day.'],
      ['Wk 05 - Repair', '"I vanished on you. It wasn\'t about you. I\'m practicing staying."'],
      ['Wk 06 - Build', '"I stay. Especially when it\'s hard."'],
    ],
  },
];

window.SiteHeader = SiteHeader;
window.SiteFooter = SiteFooter;
window.SiteLink = SiteLink;
window.navTo = navTo;
window.PB_PATTERNS = PB_PATTERNS;
