/* ============================================================
   /patterns/peacekeeper - single pattern detail
   Template that adapts to whichever pattern is selected
   ============================================================ */

const PatternDetailPage = ({ slug = 'peacekeeper' }) => {
  const p = PB_PATTERNS.find((x) => x.slug === slug) || PB_PATTERNS[0];

  return (
    <div className="etp etp-bg-ivory" style={{ width: '100%', minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <SiteHeader active="patterns" />

      {/* Crumb */}
      <div style={{ padding: '20px 56px', borderBottom: '1px solid #d8c9a8', background: '#ebe6db' }}>
        <div className="label" style={{ color: '#666' }}>Patterns / <span style={{ color: '#1a6b5a' }}>{p.name}</span></div>
      </div>

      {/* Hero - split with the dossier */}
      <section style={{ padding: '88px 56px 56px', background: '#f4f1eb', borderBottom: '1px solid #1c1c1c' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 64, alignItems: 'flex-end' }}>
          <div>
            <div className="label" style={{ color: '#666', marginBottom: 24 }}>Pattern dossier - {p.num} of 05</div>
            <h1 style={{ fontSize: 'clamp(64px, 10vw, 144px)', lineHeight: 0.88, letterSpacing: '-0.03em' }}>
              {p.name.split(' ')[0]}<br/><span style={{ color: '#1a6b5a' }}>{p.name.split(' ').slice(1).join(' ')}.</span>
            </h1>
            <p style={{ fontSize: 22, lineHeight: 1.4, fontWeight: 500, marginTop: 32, maxWidth: 700 }}>
              {p.one}
            </p>
          </div>

          <div style={{ background: '#1c1c1c', color: '#f4f1eb', padding: '32px 32px', border: '1px solid #1c1c1c' }}>
            <div className="label" style={{ color: '#d4883a', marginBottom: 16 }}>● Quick facts</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
                ['Forms in', 'Childhood - usually before age 7'],
                ['Lives in', p.body_lives],
                ['Misread as', p.misread],
                ['Graduation', `"${p.stops}"`],
              ].map(([k, v]) => (
                <div key={k} style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 16, paddingBottom: 16, borderBottom: '1px solid #444' }}>
                  <div className="label" style={{ opacity: 0.6 }}>{k}</div>
                  <div style={{ fontSize: 14, lineHeight: 1.4 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* The body */}
      <section style={{ padding: '80px 56px', background: '#ebe6db', borderBottom: '1px solid #1c1c1c' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 64 }}>
          <div>
            <div className="label" style={{ color: '#1a6b5a', marginBottom: 8 }}>● Section 01</div>
            <h3 style={{ fontSize: 36, lineHeight: 0.95 }}>What it is.</h3>
          </div>
          <p style={{ fontSize: 22, lineHeight: 1.55, maxWidth: 760 }}>{p.body}</p>
        </div>
      </section>

      {/* The costs */}
      <section style={{ padding: '80px 56px', background: '#f4f1eb', borderBottom: '1px solid #1c1c1c' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 64 }}>
          <div>
            <div className="label" style={{ color: '#1a6b5a', marginBottom: 8 }}>● Section 02</div>
            <h3 style={{ fontSize: 36, lineHeight: 0.95 }}>What it costs.</h3>
            <p style={{ fontSize: 15, lineHeight: 1.55, color: '#444', marginTop: 16 }}>The three most common costs we hear in group, in the order we hear them.</p>
          </div>
          <div>
            {p.costs.map((c, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: 24, padding: '28px 0', borderBottom: '1px solid #1c1c1c' }}>
                <div className="label" style={{ color: '#d4883a' }}>0{i+1}</div>
                <div style={{ fontSize: 28, fontWeight: 500, lineHeight: 1.2, letterSpacing: '-0.005em' }}>{c}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* The work */}
      <section style={{ padding: '80px 56px', background: '#1c1c1c', color: '#f4f1eb', borderBottom: '1px solid #1c1c1c' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 64 }}>
          <div>
            <div className="label" style={{ color: '#d4883a', marginBottom: 8 }}>● Section 03</div>
            <h3 style={{ fontSize: 36, lineHeight: 0.95 }}>The work.</h3>
            <p style={{ fontSize: 15, lineHeight: 1.55, opacity: 0.7, marginTop: 16 }}>Six weeks. Pattern-specific scripts and prompts at every stage.</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
            {p.work6.map(([t, b]) => (
              <div key={t} style={{ border: '1px solid #444', padding: '20px 24px' }}>
                <div className="label" style={{ color: '#d4883a', marginBottom: 8 }}>{t}</div>
                <p style={{ fontSize: 15, lineHeight: 1.45 }}>{b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* In their words - removed until real, consented, per-pattern member quotes
          are collected. Never reuse the same quote across patterns. */}

      {/* Other patterns */}
      <section style={{ padding: '80px 56px', background: '#f4f1eb', borderBottom: '1px solid #1c1c1c' }}>
        <div className="label" style={{ color: '#666', marginBottom: 24 }}>The other four</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {PB_PATTERNS.filter((x) => x.slug !== p.slug).map((o) => (
            <SiteLink key={o.slug} to={`/patterns/${o.slug}`} className="etp-lift" style={{ border: '1px solid #1c1c1c', padding: '24px 24px 20px', background: '#ebe6db', minHeight: 180, display: 'flex', flexDirection: 'column', textDecoration: 'none', color: 'inherit' }}>
              <div className="label" style={{ color: '#1a6b5a', marginBottom: 12 }}>{o.num}</div>
              <h4 style={{ fontSize: 24, lineHeight: 1, marginBottom: 12 }}>{o.name}</h4>
              <p style={{ fontSize: 13, lineHeight: 1.5, color: '#444', flex: 1 }}>{o.one}</p>
              <span className="label" style={{ color: '#1a6b5a', marginTop: 16, borderBottom: '1px solid #1a6b5a', alignSelf: 'flex-start', paddingBottom: 2 }}>Read →</span>
            </SiteLink>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: '80px 56px', background: '#1a6b5a', color: '#f4f1eb' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center' }}>
          <div>
            <div className="label" style={{ color: '#d4883a', marginBottom: 12 }}>● The community</div>
            <h2 style={{ fontSize: 56, lineHeight: 0.92, letterSpacing: '-0.02em' }}>One room.<br/>People who carry what you carry.</h2>
          </div>
          <SiteLink to="/reserve" className="etp-btn etp-btn-orange" style={{ padding: '20px 28px', textDecoration: 'none' }}>Reserve a founding seat →</SiteLink>
        </div>
      </section>

      <SiteFooter />
    </div>
  );
};

window.PatternDetailPage = PatternDetailPage;
