// foyer-context.jsx — Section 04 · Context blocks.
//
// Three orientation stanzas, in order, per direction:
//   A) Who This Is For — punchy short-line stanzas
//   B) What This Is Not — anti-pattern list
//   C) The Cohort — date + seat split + Band App detail
//
// Visual variety inside one section: alternating ground tones
// keep the scroll interesting without breaking the quiet
// register. A) on champagne, B) on navy (inverse), C) back to
// champagne with bronze borders.

// ─────────────────────────────────────────────────────────────
// A) WHO THIS IS FOR — stanzas with a closing punctuation line
// ─────────────────────────────────────────────────────────────
const WHO_LINES = [
  'who runs everything — the schedules, the systems, the people, the household, the work.',
  'who uses technology every day, without anyone ever sitting down to teach her how.',
  'who\'s tired of feeling behind on something nobody handed her instructions for.',
  'who has fifteen minutes, not fifteen hours.',
  'who isn\'t looking for another app, another expert, or another reason to feel small.',
];

const FoyerWho = () => (
  <section id="who"
    data-screen-label="Foyer · 04A Who This Is For"
    style={{
      background: 'var(--t-ground)',
      color: 'var(--t-text)',
      padding: '48px 24px 64px',
      borderTop: '1px solid var(--t-line)',
    }}>
    <div style={{ maxWidth: 760, margin: '0 auto' }}>
      <div style={{
        fontFamily: 'var(--font-body)', fontWeight: 700,
        fontSize: 11, letterSpacing: '0.36em', textTransform: 'uppercase',
        color: 'var(--t-accent)', marginBottom: 18,
      }}>Who This Is For</div>

      <h2 style={{
        fontFamily: 'var(--font-display)', fontWeight: 300,
        fontSize: 'clamp(26px, 5.6vw, 36px)', lineHeight: 1.1,
        letterSpacing: '-0.014em',
        color: 'var(--t-text)', margin: '0 0 30px',
        textWrap: 'balance',
      }}>
        This is for the Resident{' '}
        <em style={{ fontStyle: 'italic', color: 'var(--t-accent)' }}>
          who runs everything.
        </em>
      </h2>

      <ul style={{
        listStyle: 'none', padding: 0, margin: '0 0 36px',
        display: 'flex', flexDirection: 'column',
      }}>
        {WHO_LINES.map((line, i) => (
          <li key={i} style={{
            padding: '14px 0',
            borderTop: '1px solid var(--t-line)',
            ...(i === WHO_LINES.length - 1 ? { borderBottom: '1px solid var(--t-line)' } : {}),
            display: 'grid',
            gridTemplateColumns: '32px 1fr',
            gap: 14, alignItems: 'baseline',
          }}>
            <span aria-hidden="true" style={{
              fontFamily: 'var(--font-display)', fontWeight: 300,
              fontStyle: 'italic',
              fontSize: 22, lineHeight: 1, color: 'var(--t-accent)',
            }}>—</span>
            <span style={{
              fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.65,
              color: 'var(--t-text)',
              textWrap: 'pretty',
            }}>
              <span style={{
                fontFamily: 'var(--font-display)', fontStyle: 'italic',
                color: 'var(--t-text-2)', marginRight: 8,
              }}>She</span>{line}
            </span>
          </li>
        ))}
      </ul>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.7,
        color: 'var(--t-text)', margin: '0 0 22px',
        textWrap: 'pretty',
      }}>
        She is looking for a way to live with what she already has — on purpose.
      </p>

      <p style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontWeight: 400,
        fontSize: 'clamp(22px, 4.5vw, 28px)', lineHeight: 1.25,
        letterSpacing: '-0.012em',
        color: 'var(--t-accent)', margin: 0,
        textWrap: 'balance',
      }}>
        That way begins here.
      </p>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// B) WHAT THIS IS NOT — inverse, navy ground, anti-pattern list
// ─────────────────────────────────────────────────────────────
const NOT_LINES = [
  'a tech course.',
  'a list of apps to download.',
  "another expert telling you everything you\u2019ve been doing wrong.",
];

const FoyerNot = () => (
  <section id="not"
    data-screen-label="Foyer · 04B What This Is Not"
    style={{
      background: 'var(--t-navy)',
      color: 'var(--t-text-on-navy)',
      padding: '72px 24px 72px',
    }}>
    <div style={{ maxWidth: 760, margin: '0 auto' }}>
      <div style={{
        fontFamily: 'var(--font-body)', fontWeight: 700,
        fontSize: 11, letterSpacing: '0.36em', textTransform: 'uppercase',
        color: 'var(--t-accent-2)', marginBottom: 18,
      }}>What This Is Not</div>

      <h2 style={{
        fontFamily: 'var(--font-display)', fontWeight: 300,
        fontSize: 'clamp(26px, 5.6vw, 36px)', lineHeight: 1.1,
        letterSpacing: '-0.014em',
        color: 'var(--t-text-on-navy)', margin: '0 0 30px',
        textWrap: 'balance',
      }}>
        Let's name what it's{' '}
        <em style={{ fontStyle: 'italic', color: 'var(--t-accent-2)' }}>
          not.
        </em>
      </h2>

      <ul style={{
        listStyle: 'none', padding: 0, margin: '0 0 32px',
        display: 'flex', flexDirection: 'column',
      }}>
        {NOT_LINES.map((line, i) => (
          <li key={i} style={{
            padding: '16px 0',
            borderTop: '1px solid var(--t-line-on-navy)',
            ...(i === NOT_LINES.length - 1 ? { borderBottom: '1px solid var(--t-line-on-navy)' } : {}),
            display: 'grid',
            gridTemplateColumns: '60px 1fr',
            gap: 14, alignItems: 'baseline',
          }}>
            <span aria-hidden="true" style={{
              fontFamily: 'var(--font-body)', fontWeight: 700,
              fontSize: 9.5, letterSpacing: '0.30em', textTransform: 'uppercase',
              color: 'var(--t-accent-2)',
            }}>Not</span>
            <span style={{
              fontFamily: 'var(--font-display)', fontWeight: 400,
              fontStyle: 'italic',
              fontSize: 'clamp(18px, 4vw, 22px)', lineHeight: 1.3,
              color: 'var(--t-text-on-navy)',
              textWrap: 'pretty',
            }}>{line}</span>
          </li>
        ))}
      </ul>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.7,
        color: 'var(--t-text-on-navy-2)', margin: 0,
        textWrap: 'pretty',
      }}>
        It is seven days of practical, personal, empowering work —{' '}
        <em style={{ fontStyle: 'italic', color: 'var(--t-accent-2)' }}>
          designed for real life
        </em>, taught in real time, built for the way you already live.
      </p>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// C) THE COHORT — date, seat breakdown, Band App detail
// ─────────────────────────────────────────────────────────────
const COHORT_SPLIT = [
  { count: 7,  level: 'Level I',   name: 'Learn',  sub: 'Foundation' },
  { count: 21, level: 'Level II',  name: 'Apply',  sub: 'The Founding 21' },
  { count: 7,  level: 'Level III', name: 'Access', sub: 'The Seven of Access' },
];

const FoyerCohort = () => (
  <section id="cohort"
    data-screen-label="Foyer · 04C The Cohort"
    style={{
      background: 'var(--t-ground)',
      color: 'var(--t-text)',
      padding: '72px 24px 80px',
      borderTop: '1px solid var(--t-line)',
    }}>
    <div style={{ maxWidth: 1000, margin: '0 auto' }}>
      <div style={{
        fontFamily: 'var(--font-body)', fontWeight: 700,
        fontSize: 11, letterSpacing: '0.36em', textTransform: 'uppercase',
        color: 'var(--t-accent)', marginBottom: 18,
      }}>The Cohort</div>

      {/* date block */}
      <div style={{
        display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap',
        marginBottom: 36,
        paddingBottom: 24,
        borderBottom: '1px solid var(--t-line)',
      }}>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 300,
          fontSize: 'clamp(30px, 6vw, 44px)', lineHeight: 1.0,
          letterSpacing: '-0.018em',
          color: 'var(--t-text)', margin: 0,
          textWrap: 'balance',
        }}>
          Monday, June 1{' '}
          <em style={{ fontStyle: 'italic', color: 'var(--t-accent)' }}>—</em>{' '}
          Sunday, June 7, <em style={{ fontStyle: 'italic', color: 'var(--t-accent)' }}>2026.</em>
        </h2>
        <div style={{
          fontFamily: 'var(--font-body)', fontWeight: 600,
          fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase',
          color: 'var(--t-text-2)',
        }}>Inaugural Cohort</div>
      </div>

      {/* 35 marquee + seat split */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(180px, 240px) 1fr',
        gap: 36,
        alignItems: 'center',
        marginBottom: 36,
      }} className="foyer-cohort-grid">
        <div>
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 300,
            fontSize: 'clamp(96px, 14vw, 140px)', lineHeight: 0.85,
            letterSpacing: '-0.04em',
            color: 'var(--t-accent)', margin: '0 0 4px',
          }}>35</div>
          <div style={{
            fontFamily: 'var(--font-body)', fontWeight: 700,
            fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase',
            color: 'var(--t-text-2)',
          }}>Residents total</div>
        </div>

        <ul style={{
          listStyle: 'none', padding: 0, margin: 0,
          display: 'flex', flexDirection: 'column',
        }}>
          {COHORT_SPLIT.map((C, i) => (
            <li key={C.level} style={{
              padding: '14px 0',
              borderTop: '1px solid var(--t-line)',
              ...(i === COHORT_SPLIT.length - 1 ? { borderBottom: '1px solid var(--t-line)' } : {}),
              display: 'grid',
              gridTemplateColumns: '64px 1fr auto',
              gap: 14, alignItems: 'baseline',
            }}>
              <span style={{
                fontFamily: 'var(--font-display)', fontWeight: 300,
                fontSize: 30, lineHeight: 1, letterSpacing: '-0.02em',
                color: 'var(--t-accent)',
              }}>{C.count}</span>
              <span style={{
                fontFamily: 'var(--font-display)', fontStyle: 'italic',
                fontSize: 17, color: 'var(--t-text)',
              }}>{C.sub}</span>
              <span style={{
                fontFamily: 'var(--font-body)', fontWeight: 600,
                fontSize: 9.5, letterSpacing: '0.26em', textTransform: 'uppercase',
                color: 'var(--t-text-2)', whiteSpace: 'nowrap',
              }}>{C.level} · {C.name}</span>
            </li>
          ))}
        </ul>
      </div>

      {/* Band App location strip */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 16, flexWrap: 'wrap',
        padding: '18px 22px',
        background: 'var(--t-ground-soft-2)',
        border: '1px solid var(--t-line-strong)',
        borderLeft: '3px solid var(--t-accent)',
        borderRadius: 2,
      }}>
        <div>
          <div style={{
            fontFamily: 'var(--font-body)', fontWeight: 700,
            fontSize: 9.5, letterSpacing: '0.28em', textTransform: 'uppercase',
            color: 'var(--t-accent)', marginBottom: 4,
          }}>Where it unfolds</div>
          <div style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic',
            fontWeight: 400, fontSize: 18, color: 'var(--t-text)',
          }}>
            The Tech Lifestyle <span style={{ color: 'var(--t-text-2)' }}>·</span>{' '}
            the private community of Living Digitally<sup style={{ fontSize: 9 }}>™</sup>.
          </div>
        </div>
        <div style={{
          fontFamily: 'var(--font-body)', fontWeight: 700,
          fontSize: 10.5, letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'var(--ld-aqua-700, var(--t-accent-2))',
          padding: '8px 14px', borderRadius: 2,
          background: 'color-mix(in srgb, var(--ld-aqua) 22%, transparent)',
          border: '1px solid var(--ld-aqua)',
        }}>On the Band App</div>
      </div>
    </div>

    <style>{`
      @media (max-width: 720px) {
        .foyer-cohort-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
      }
    `}</style>
  </section>
);

Object.assign(window, { FoyerWho, FoyerNot, FoyerCohort });
