// sig-resident.jsx — Section 04. What Every Resident Receives.
//
// Visual register: returning to navy. We've just passed through the
// pearl-conversion moment (Doorways) — now we descend back into the
// institution. This section anchors what's the same across every
// Doorway: the Core Curriculum, the Live Cohort, the Community.
//
// Three pillars in an editorial register. Numbered. Hairlined.

const CORE_CURRICULUM = [
  {
    title: 'The 30-Day Digital Reset',
    body: 'A guided 30-day journey toward clarity, with daily journal prompts.',
  },
  {
    title: 'A Beginner\'s Guide to Building Effective AI Prompts',
    body: 'Plain-language instruction for everyday AI use, written for real life and not technical mastery.',
  },
  {
    title: 'The Living Digitally Social Media Planner',
    body: 'Plan with intention, not overwhelm.',
  },
  {
    title: 'The Living Digitally Social Media Tracker',
    body: 'See what\'s working, simply.',
  },
  {
    title: '7 Days Living Digitally Mindset Prompts',
    body: 'A daily practice for the way you think about technology.',
  },
];

const SigResident = () => (
  <section id="core" data-screen-label="04 What Every Resident Receives"
    style={{
      background:
        'radial-gradient(ellipse at 20% 0%, rgba(201,162,74,0.10) 0%, transparent 50%),' +
        'linear-gradient(180deg, var(--ld-navy-900) 0%, var(--ld-navy) 60%, var(--ld-navy-800) 100%)',
      color: 'var(--ld-pearl-100)',
      padding: '56px 32px 56px',
      position: 'relative', overflow: 'hidden',
    }}>
    {/* faint architectural floor plan */}
    <div aria-hidden="true" style={{
      position: 'absolute', inset: 0,
      backgroundImage:
        'linear-gradient(0deg, rgba(201,162,74,0.04) 1px, transparent 1px),' +
        'linear-gradient(90deg, rgba(201,162,74,0.04) 1px, transparent 1px)',
      backgroundSize: '120px 120px',
      maskImage: 'radial-gradient(ellipse at 50% 50%, black 20%, transparent 75%)',
      WebkitMaskImage: 'radial-gradient(ellipse at 50% 50%, black 20%, transparent 75%)',
      pointerEvents: 'none',
    }} />

    <div style={{ maxWidth: 1320, margin: '0 auto', position: 'relative' }}>

      {/* Section head */}
      <div style={{ textAlign: 'center', marginBottom: 64 }}>
        <div style={{
          fontFamily: 'var(--font-body)', fontWeight: 700,
          fontSize: 11, letterSpacing: '0.36em', textTransform: 'uppercase',
          color: 'var(--ld-aqua)', marginBottom: 16,
        }}>What Every Resident Receives</div>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 300,
          fontSize: 'clamp(32px, 4.4vw, 52px)', lineHeight: 1.04,
          letterSpacing: '-0.014em',
          color: 'var(--ld-pearl-100)', margin: 0,
          textWrap: 'balance',
        }}>
          Through every Doorway —<br />
          <em style={{ fontStyle: 'italic', color: 'var(--ld-gold)' }}>
            the same foundation.
          </em>
        </h2>
      </div>

      {/* Three pillars */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr)',
        gap: 40,
        alignItems: 'start',
      }} className="sig-resident-grid">

        {/* PILLAR 01 — Core Curriculum (largest column) */}
        <article style={{
          background: 'rgba(13,27,61,0.6)',
          border: '1px solid rgba(201,162,74,0.32)',
          padding: '32px 28px 28px',
          borderRadius: 2,
          position: 'relative',
        }}>
          <div aria-hidden="true" style={{
            fontFamily: 'var(--font-display)', fontWeight: 300,
            fontSize: 36, lineHeight: 1, letterSpacing: '-0.02em',
            color: 'var(--ld-gold)', marginBottom: 6,
          }}>01</div>
          <div style={{
            fontFamily: 'var(--font-body)', fontWeight: 700,
            fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase',
            color: 'var(--ld-aqua)', marginBottom: 8,
          }}>Your Core Curriculum</div>
          <h3 style={{
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontStyle: 'italic',
            fontSize: 24, lineHeight: 1.15, letterSpacing: '-0.008em',
            color: 'var(--ld-pearl-100)', margin: '0 0 22px',
          }}>
            Five digital products from The Art of Living Digitally<sup style={{ fontSize: 11 }}>™</sup>,
            yours from day one.
          </h3>

          <ul style={{
            listStyle: 'none', padding: 0, margin: 0,
            display: 'flex', flexDirection: 'column',
          }}>
            {CORE_CURRICULUM.map((C, i) => (
              <li key={i} style={{
                padding: '14px 0',
                borderTop: '1px solid rgba(201,162,74,0.20)',
                ...(i === CORE_CURRICULUM.length - 1 ? { borderBottom: '1px solid rgba(201,162,74,0.20)' } : {}),
                display: 'grid', gridTemplateColumns: '30px 1fr',
                gap: 12, alignItems: 'baseline',
              }}>
                <span aria-hidden="true" style={{
                  fontFamily: 'var(--font-display)', fontWeight: 400,
                  fontStyle: 'italic',
                  fontSize: 18, color: 'var(--ld-gold)',
                  letterSpacing: '-0.005em',
                }}>{String(i + 1).padStart(2, '0')}</span>
                <div>
                  <div style={{
                    fontFamily: 'var(--font-display)', fontStyle: 'italic',
                    fontWeight: 400, fontSize: 17, lineHeight: 1.25,
                    color: 'var(--ld-pearl-100)',
                  }}>{C.title}</div>
                  <p style={{
                    fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.55,
                    color: 'rgba(235,221,197,0.7)',
                    margin: '4px 0 0',
                    textWrap: 'pretty',
                  }}>{C.body}</p>
                </div>
              </li>
            ))}
          </ul>
        </article>

        {/* PILLAR 02 — Live Cohort */}
        <article style={{
          background: 'rgba(13,27,61,0.6)',
          border: '1px solid rgba(95,224,230,0.32)',
          padding: '32px 28px 28px',
          borderRadius: 2,
          alignSelf: 'stretch',
          display: 'flex', flexDirection: 'column',
        }}>
          <div aria-hidden="true" style={{
            fontFamily: 'var(--font-display)', fontWeight: 300,
            fontSize: 36, lineHeight: 1, letterSpacing: '-0.02em',
            color: 'var(--ld-aqua)', marginBottom: 6,
          }}>02</div>
          <div style={{
            fontFamily: 'var(--font-body)', fontWeight: 700,
            fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase',
            color: 'var(--ld-aqua)', marginBottom: 8,
          }}>Your Live Cohort</div>
          <h3 style={{
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontStyle: 'italic',
            fontSize: 22, lineHeight: 1.2, letterSpacing: '-0.008em',
            color: 'var(--ld-pearl-100)', margin: '0 0 22px',
          }}>
            Seven days inside The Tech Lifestyle.
          </h3>
          <p style={{
            fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.7,
            color: 'rgba(235,221,197,0.78)', margin: '0 0 22px',
            textWrap: 'pretty',
          }}>
            Beginning Monday, June 1, 2026. One inaugural class. One
            container that holds the work. The live stream takes
            place inside The Tech Lifestyle on the Band App. Same
            seven days for every Resident, regardless of Doorway.
          </p>
          <div style={{
            marginTop: 'auto',
            padding: '14px 16px',
            background: 'var(--ld-navy-900)',
            border: '1px solid rgba(95,224,230,0.32)',
            borderRadius: 2,
            fontFamily: 'var(--font-body)', fontWeight: 600,
            fontSize: 10, letterSpacing: '0.26em', textTransform: 'uppercase',
            color: 'var(--ld-aqua)',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            gap: 12, flexWrap: 'wrap',
          }}>
            <span>Band App</span>
            <span style={{ color: 'rgba(235,221,197,0.55)' }}>
              Mon Jun 1 → Sun Jun 7, 2026
            </span>
          </div>
        </article>

        {/* PILLAR 03 — Community */}
        <article style={{
          background: 'rgba(13,27,61,0.6)',
          border: '1px solid rgba(95,224,230,0.32)',
          padding: '32px 28px 28px',
          borderRadius: 2,
          alignSelf: 'stretch',
          display: 'flex', flexDirection: 'column',
        }}>
          <div aria-hidden="true" style={{
            fontFamily: 'var(--font-display)', fontWeight: 300,
            fontSize: 36, lineHeight: 1, letterSpacing: '-0.02em',
            color: 'var(--ld-aqua)', marginBottom: 6,
          }}>03</div>
          <div style={{
            fontFamily: 'var(--font-body)', fontWeight: 700,
            fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase',
            color: 'var(--ld-aqua)', marginBottom: 8,
          }}>Your Community</div>
          <h3 style={{
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontStyle: 'italic',
            fontSize: 22, lineHeight: 1.2, letterSpacing: '-0.008em',
            color: 'var(--ld-pearl-100)', margin: '0 0 22px',
          }}>
            Entry into The Tech Lifestyle on the Band App.
          </h3>
          <p style={{
            fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.7,
            color: 'rgba(235,221,197,0.78)', margin: '0 0 22px',
            textWrap: 'pretty',
          }}>
            A private community that's still there when the seven days
            end. The room you walk into stays open to you.
          </p>
          <div style={{
            marginTop: 'auto',
            padding: '14px 16px',
            background: 'var(--ld-navy-900)',
            border: '1px solid rgba(95,224,230,0.32)',
            borderRadius: 2,
            fontFamily: 'var(--font-body)', fontWeight: 600,
            fontSize: 10, letterSpacing: '0.26em', textTransform: 'uppercase',
            color: 'var(--ld-aqua)',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }}>
            <span>Band App</span>
            <span style={{ color: 'rgba(235,221,197,0.55)' }}>· The Tech Lifestyle</span>
          </div>
        </article>
      </div>

    </div>
    <style>{`
      @media (max-width: 1080px) {
        .sig-resident-grid { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </section>
);

Object.assign(window, { SigResident });
