/* ============================================================
   /patterns - overview of all 5 inheritances
   ============================================================ */

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

      {/* Hero */}
      <section style={{ padding: '88px 56px 56px', borderBottom: '1px solid #1c1c1c' }}>
        <div className="label" style={{ color: '#666', marginBottom: 24 }}>The five inheritances</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'flex-end' }}>
          <h1 style={{ fontSize: 'clamp(64px, 9vw, 128px)', lineHeight: 0.88, letterSpacing: '-0.025em' }}>
            Five strategies.<br/><span style={{ color: '#1a6b5a' }}>One inheritance.</span>
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.55 }}>
            Every pattern breaker carries one dominant strategy and a secondary that looks like it. They aren't personality. They're the survival logic of a child you had to be - running in an adult you became.
          </p>
        </div>
      </section>

      {/* How to read these - honest framing where the invented stats used to be */}
      <section style={{ padding: '48px 56px', background: '#ebe6db', borderBottom: '1px solid #1c1c1c' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {[
            ['A map, not a diagnosis', 'These are survival strategies, not disorders. Naming yours makes it pointable. Pointable is half the work.'],
            ['You likely carry two', 'One dominant, one secondary that imitates it. The quiz surfaces both - the work starts with the loud one.'],
            ['The body keeps the record', 'Each pattern lives somewhere - a jaw, a chest, the soles of the feet. Where yours lives is on its page below.'],
          ].map(([t, b], i) => (
            <div key={t} style={{ display: 'grid', gridTemplateColumns: '32px 1fr', gap: 16 }}>
              <div className="label" style={{ color: '#d4883a', paddingTop: 4 }}>0{i + 1}</div>
              <div>
                <h4 style={{ fontSize: 20, lineHeight: 1.1, marginBottom: 8, color: '#1a6b5a' }}>{t}</h4>
                <p style={{ fontSize: 14.5, lineHeight: 1.55, color: '#333' }}>{b}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* The five - full cards */}
      <section style={{ padding: '88px 56px', background: '#f4f1eb' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          {PB_PATTERNS.map((p, i) => (
            <article key={p.slug} style={{ display: 'grid', gridTemplateColumns: '88px 1fr 320px', gap: 32, padding: '40px 32px', border: '1px solid #1c1c1c', background: i % 2 === 0 ? '#ebe6db' : '#f4f1eb' }}>
              <div>
                <div style={{ fontWeight: 700, fontSize: 56, lineHeight: 1, color: '#1a6b5a', letterSpacing: '-0.025em' }}>{p.num}</div>
              </div>
              <div>
                <h2 style={{ fontSize: 44, lineHeight: 0.95, marginBottom: 12, letterSpacing: '-0.02em' }}>{p.name}</h2>
                <p style={{ fontSize: 18, lineHeight: 1.5, marginBottom: 20, fontWeight: 500 }}>{p.one}</p>
                <p style={{ fontSize: 16, lineHeight: 1.6, color: '#333', maxWidth: 720 }}>{p.body}</p>
                <SiteLink to={`/patterns/${p.slug}`} className="label" style={{ marginTop: 24, display: 'inline-block', color: '#1a6b5a', textDecoration: 'none', borderBottom: '1px solid #1a6b5a', paddingBottom: 2 }}>Read the full report →</SiteLink>
              </div>
              <aside style={{ background: '#1c1c1c', color: '#f4f1eb', padding: '20px 24px', alignSelf: 'flex-start' }}>
                <div className="label" style={{ color: '#d4883a', marginBottom: 12 }}>● The graduation</div>
                <div style={{ fontWeight: 700, fontSize: 22, lineHeight: 1.1, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>"{p.stops}"</div>
                <div className="label" style={{ marginTop: 16, opacity: 0.6, fontSize: 10 }}>Week 06 - what you build</div>
              </aside>
            </article>
          ))}
        </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 90-second diagnostic</div>
            <h2 style={{ fontSize: 56, lineHeight: 0.92, letterSpacing: '-0.02em' }}>Don't guess.<br/>Take the quiz.</h2>
          </div>
          <SiteLink to="/quiz/start" className="etp-btn etp-btn-orange" style={{ padding: '20px 28px', textDecoration: 'none' }}>Start the pattern quiz →</SiteLink>
        </div>
      </section>

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

window.PatternsPage = PatternsPage;
