/* ============================================================
   /  HOMEPAGE - self-paced coursework + always-on community
   ============================================================ */

const HomePage = () => (
  <div className="etp etp-bg-ivory" style={{ minHeight: '100%' }}>
    <SiteHeader active="home" />

    {/* HERO */}
    <section style={{ position: 'relative', overflow: 'hidden', padding: '120px 56px 96px' }}>
      <BrokenRing size={620} color="#1a6b5a" sw={2} style={{ position: 'absolute', top: -180, right: -190, pointerEvents: 'none', opacity: 0.8 }} />
      <div style={{ position: 'relative', zIndex: 1 }}>
        <div className="label" style={{ color: '#1a6b5a', marginBottom: 32 }}>● Founding 500 — opening soon</div>
        <h1 style={{ fontSize: 'clamp(72px, 11vw, 168px)', lineHeight: 0.84, letterSpacing: '-0.035em', maxWidth: 1280, marginBottom: 48 }}>
          End the inheritance<br/>you didn't <span style={{ color: '#1a6b5a' }}>sign for.</span>
        </h1>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'flex-start' }}>
          <div style={{ maxWidth: 720 }}>
            <p style={{ fontSize: 26, lineHeight: 1.4, fontWeight: 500, marginBottom: 20 }}>
              Self-paced coursework. An always-on community of people who carry what you carry. A room that doesn't dissolve when the program ends.
            </p>
            <p style={{ fontSize: 20, lineHeight: 1.45, color: '#1a6b5a', fontWeight: 600 }}>
              You don't stop a pattern by reading another book. You stop it by standing still long enough to break the line.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 12 }}>
            <SiteLink to="/quiz" className="etp-btn etp-btn-orange" style={{ padding: '20px 28px', textDecoration: 'none', fontSize: 16 }}>Take the 90-second quiz →</SiteLink>
            <SiteLink to="/coursework" className="etp-btn etp-btn-ghost" style={{ padding: '20px 28px', textDecoration: 'none', fontSize: 16 }}>See the coursework</SiteLink>
            <div className="label" style={{ color: '#666', marginTop: 8 }}>Free. 90 seconds. Your result and printable dossier, on screen.</div>
          </div>
        </div>
      </div>
    </section>

    {/* MANTRA TICKER */}
    <Marquee items={['See it', 'Name it', 'Stop it', 'Break the line']} />

    {/* THE WORK SAID OUT LOUD */}
    <section style={{ padding: '96px 56px', background: '#ebe6db', borderBottom: '1px solid #1c1c1c' }}>
      <div className="label" style={{ color: '#1a6b5a', marginBottom: 24 }}>● The work, said out loud</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {[
          ['See it.', 'Name the survival strategy that\'s been running. Stop calling it personality.'],
          ['Trace it.', 'Identify the lineage. The strategy is older than you. Knowing the source separates inheritance from identity.'],
          ['Stop it.', 'Build the four-second pause that interrupts the pattern. Build the line that replaces it. Share it with the room when it\'s ready.'],
        ].map(([t, b]) => (
          <div key={t} style={{ background: '#f4f1eb', border: '1px solid #1c1c1c', padding: '40px 32px', minHeight: 240 }}>
            <h3 style={{ fontSize: 56, lineHeight: 0.92, letterSpacing: '-0.025em', marginBottom: 20, color: '#1a6b5a' }}>{t}</h3>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: '#1c1c1c' }}>{b}</p>
          </div>
        ))}
      </div>
    </section>

    {/* WHAT YOU GET - 3 things */}
    <section style={{ padding: '96px 56px', background: '#f4f1eb' }}>
      <Reveal>
        <div className="label" style={{ color: '#1a6b5a', marginBottom: 24 }}>● What you get</div>
        <h2 style={{ fontSize: 88, lineHeight: 0.9, letterSpacing: '-0.03em', marginBottom: 48 }}>Three things.<br/>That's it.</h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        <article style={{ background: '#1a6b5a', color: '#f4f1eb', padding: '40px 32px', minHeight: 480, display: 'flex', flexDirection: 'column' }}>
          <div className="label" style={{ color: '#d4883a', marginBottom: 24 }}>● 01 - Coursework</div>
          <h3 style={{ fontSize: 44, lineHeight: 0.92, letterSpacing: '-0.025em', marginBottom: 20 }}>Self-paced.<br/>Six chapters.</h3>
          <p style={{ fontSize: 16, lineHeight: 1.55, marginBottom: 24, opacity: 0.95 }}>A self-paced sequence built around your specific pattern. Short course videos, workbooks, written practices, scripts. About 12 minutes a day, from the day doors open.</p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 24, fontSize: 14 }}>
            {['Pattern-specific scripts & prompts', 'Self-paced - about 12 min/day', 'Course videos, workbooks, audio', 'Printable dossier of your work'].map((t) => (
              <li key={t} style={{ display: 'grid', gridTemplateColumns: '20px 1fr', gap: 12 }}>
                <span style={{ color: '#d4883a', fontWeight: 700 }}>✓</span><span>{t}</span>
              </li>
            ))}
          </ul>
          <SiteLink to="/coursework" className="etp-btn etp-btn-orange" style={{ padding: '14px 20px', alignSelf: 'flex-start', textDecoration: 'none', marginTop: 'auto' }}>See the six chapters →</SiteLink>
        </article>

        <article style={{ background: '#ebe6db', color: '#1c1c1c', padding: '40px 32px', minHeight: 480, display: 'flex', flexDirection: 'column', border: '1px solid #1c1c1c' }}>
          <div className="label" style={{ color: '#1a6b5a', marginBottom: 24 }}>● 02 - The community</div>
          <h3 style={{ fontSize: 44, lineHeight: 0.92, letterSpacing: '-0.025em', marginBottom: 20 }}>Always on.<br/>Open to all.</h3>
          <p style={{ fontSize: 16, lineHeight: 1.55, marginBottom: 24 }}>One ongoing community, open to every member. Every pattern in one room. Post your work, get witnessed, read quietly - while you're in coursework and long after.</p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 24, fontSize: 14 }}>
            {['Open to every member', 'Pattern-specific threads', 'All five patterns welcome', 'Post or read - both count', 'Held by the team building it'].map((t) => (
              <li key={t} style={{ display: 'grid', gridTemplateColumns: '20px 1fr', gap: 12 }}>
                <span style={{ color: '#1a6b5a', fontWeight: 700 }}>✓</span><span>{t}</span>
              </li>
            ))}
          </ul>
          <SiteLink to="/community" className="label" style={{ color: '#1a6b5a', textDecoration: 'none', borderBottom: '2px solid #1a6b5a', alignSelf: 'flex-start', paddingBottom: 2, marginTop: 'auto' }}>How the community works →</SiteLink>
        </article>

        <article style={{ background: '#1c1c1c', color: '#f4f1eb', padding: '40px 32px', minHeight: 480, display: 'flex', flexDirection: 'column' }}>
          <div className="label" style={{ color: '#d4883a', marginBottom: 24 }}>● 03 - The library</div>
          <h3 style={{ fontSize: 44, lineHeight: 0.92, letterSpacing: '-0.025em', marginBottom: 20 }}>Every tool.<br/>Kept for you.</h3>
          <p style={{ fontSize: 16, lineHeight: 1.55, marginBottom: 24, opacity: 0.95 }}>Every script, somatic prompt, and repair template from the coursework, kept in one searchable place - pattern-tagged, and growing as the work grows.</p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 24, fontSize: 14 }}>
            {['Scripts for the hard conversations', 'Somatic prompts', 'Repair templates', 'Searchable, pattern-tagged', 'Yours for as long as you stay'].map((t) => (
              <li key={t} style={{ display: 'grid', gridTemplateColumns: '20px 1fr', gap: 12 }}>
                <span style={{ color: '#d4883a', fontWeight: 700 }}>✓</span><span>{t}</span>
              </li>
            ))}
          </ul>
          <SiteLink to="/community" className="label" style={{ color: '#d4883a', textDecoration: 'none', borderBottom: '2px solid #d4883a', alignSelf: 'flex-start', paddingBottom: 2, marginTop: 'auto' }}>See inside →</SiteLink>
        </article>
      </div>
    </section>

    {/* THE 5 PATTERNS PREVIEW */}
    <section style={{ padding: '96px 56px', background: '#1c1c1c', color: '#f4f1eb' }}>
      <Reveal>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32 }}>
          <div>
            <div className="label" style={{ color: '#d4883a', marginBottom: 16 }}>● Five inheritances</div>
            <h2 style={{ fontSize: 64, lineHeight: 0.92, letterSpacing: '-0.025em' }}>One of these is yours.</h2>
          </div>
          <SiteLink to="/patterns" className="label" style={{ color: '#d4883a', borderBottom: '2px solid #d4883a', textDecoration: 'none', paddingBottom: 4 }}>See all five →</SiteLink>
        </div>
        <div style={{ marginBottom: 40 }}><BrokenLine color="#444" dot="#d4883a" /></div>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
        {PB_PATTERNS.map((p, i) => (
          <Reveal key={p.slug} delay={i * 90}>
            <SiteLink to={`/patterns/${p.slug}`} className="etp-lift etp-pattern-card" style={{ background: '#222', border: '1px solid #444', padding: '28px 24px', minHeight: 280, height: '100%', display: 'flex', flexDirection: 'column', textDecoration: 'none', color: 'inherit' }}>
              <div className="label" style={{ color: '#d4883a', marginBottom: 16 }}>{p.num}</div>
              <h4 style={{ fontSize: 26, lineHeight: 0.95, marginBottom: 14, color: '#f4f1eb' }}>{p.name}</h4>
              <p style={{ fontSize: 13, lineHeight: 1.5, opacity: 0.75, flex: 1 }}>{p.one}</p>
              <div className="label" style={{ marginTop: 16, color: '#d4883a' }}>Read →</div>
            </SiteLink>
          </Reveal>
        ))}
      </div>
    </section>

    {/* IN THEIR WORDS - removed until real, consented member quotes exist.
        When they exist: quote + "member, week N, shared with permission".
        Never re-attribute a quote to a different name or pattern. */}

    {/* WHAT'S COMING */}
    <section style={{ padding: '88px 56px', background: '#f4f1eb' }}>
      <Reveal>
        <div className="label" style={{ color: '#1a6b5a', marginBottom: 24 }}>● The roadmap</div>
        <h2 style={{ fontSize: 64, lineHeight: 0.92, letterSpacing: '-0.025em', marginBottom: 48 }}>Built in public.</h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {[
          ['Opening', 'Founding 500', 'Coursework + community + library open.', 'now'],
          ['Next', 'Library v2', 'Pattern-specific repair templates and somatic audio library.', 'soon'],
          ['Later', '1:1 partners', 'Optional weekly 1:1s with a Pattern Breaker one chapter ahead.', 'later'],
          ['Someday', 'Pattern atlas', 'A visual research project mapping inherited patterns across cultures.', 'someday'],
        ].map(([d, t, b, status]) => (
          <article key={t} className="etp-lift" style={{ background: status === 'now' ? '#1a6b5a' : '#ebe6db', color: status === 'now' ? '#f4f1eb' : '#1c1c1c', border: '1px solid #1c1c1c', padding: '24px 24px', minHeight: 200, display: 'flex', flexDirection: 'column' }}>
            <div className="label" style={{ color: status === 'now' ? '#d4883a' : '#1a6b5a', marginBottom: 12 }}>{d}</div>
            <h4 style={{ fontSize: 22, lineHeight: 1, marginBottom: 12 }}>{t}</h4>
            <p style={{ fontSize: 13, lineHeight: 1.5, opacity: 0.9, flex: 1 }}>{b}</p>
            <div className="label" style={{ color: status === 'now' ? '#d4883a' : '#666', marginTop: 12, textTransform: 'uppercase' }}>● {status === 'now' ? 'Opening soon' : status === 'soon' ? 'In progress' : status === 'later' ? 'Planned' : 'Aspirational'}</div>
          </article>
        ))}
      </div>
    </section>

    {/* CTA */}
    <section style={{ position: 'relative', overflow: 'hidden', padding: '120px 56px', background: '#1a6b5a', color: '#f4f1eb' }}>
      <div style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div className="label" style={{ color: '#d4883a', marginBottom: 24 }}>● Founding 500 — opening soon</div>
          <h2 style={{ fontSize: 96, lineHeight: 0.88, letterSpacing: '-0.03em', marginBottom: 40 }}>The pattern stops<br/>when you stop.</h2>
          <Generations color="#f4f1eb" teal="#f4f1eb" dot="#d4883a" style={{ maxWidth: 480, opacity: 0.9 }} />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <SiteLink to="/quiz" className="etp-btn etp-btn-orange" style={{ padding: '20px 28px', textDecoration: 'none', fontSize: 16 }}>Start with the quiz →</SiteLink>
          <SiteLink to="/reserve" className="etp-btn etp-btn-ghost" style={{ padding: '20px 28px', textDecoration: 'none', fontSize: 16, color: '#f4f1eb', borderColor: '#f4f1eb' }}>Already know your pattern? Reserve directly →</SiteLink>
        </div>
      </div>
    </section>

    <SiteFooter />
  </div>
);

window.HomePage = HomePage;