// foyer-glance.jsx — Section 02 · At a Glance.
//
// Three architectural doorway arches, side-by-side. Each arch is
// crowned with price + seat count, and the body of the arch
// holds a soft checklist (filled bronze dot = included, hollow
// pearl ring = not included). Echoes the doorways from the
// Signature Program — but quiet, library-still, no roll-up
// animation, no billboard glow.

const GLANCE_ROWS = [
  { label: 'Core Curriculum',          values: [true, true, true] },
  { label: '7-Day Live Cohort',        values: [true, true, true] },
  { label: 'The Tech Lifestyle Community', values: [true, true, true] },
  { label: '15-min Prompt Precision Session', values: [false, true, false] },
  { label: '45–60 min AI Workflow Design Session', values: [false, false, true] },
];

const LEVELS = [
  { roman: 'I',   name: 'Learn',  price: '$49',  seats: '7 seats'  },
  { roman: 'II',  name: 'Apply',  price: '$97',  seats: '21 seats' },
  { roman: 'III', name: 'Access', price: '$397', seats: '7 seats'  },
];

// ─────────────────────────────────────────────────────────────
// Included marker — soft filled bronze disc with subtle inner ring
// Excluded marker — hollow pearl ring, low contrast
// ─────────────────────────────────────────────────────────────
const Marker = ({ included }) => (
  included ? (
    <span aria-label="Included" title="Included" style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: 22, height: 22, borderRadius: '50%',
      background: 'var(--t-accent)',
      color: 'var(--t-ground)',
      boxShadow: '0 0 0 4px color-mix(in srgb, var(--t-accent) 18%, transparent)',
    }}>
      <svg viewBox="0 0 12 12" width="11" height="11" aria-hidden="true">
        <path d="M2.5 6.4 L5 9 L9.6 3.6" fill="none"
              stroke="currentColor" strokeWidth="1.6"
              strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </span>
  ) : (
    <span aria-label="Not included" title="Not included" style={{
      display: 'inline-block',
      width: 14, height: 1.5,
      background: 'var(--t-line-strong)',
      borderRadius: 2,
    }} />
  )
);

// ─────────────────────────────────────────────────────────────
// FoyerArch — a single arched doorway plate for one Level.
// Pearl-ground card with a bronze arched header that holds the
// Roman numeral + price + seats.
// ─────────────────────────────────────────────────────────────
const FoyerArch = ({ L, i, rows }) => (
  <article style={{
    position: 'relative',
    background: 'var(--t-ground-soft-2)',
    border: '1px solid var(--t-line-strong)',
    borderRadius: '999px 999px 4px 4px / 60px 60px 4px 4px',
    overflow: 'hidden',
    boxShadow: '0 16px 36px rgba(46,24,16,0.10)',
    display: 'flex', flexDirection: 'column',
  }}>
    {/* arched crown */}
    <div style={{
      background:
        'radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--t-accent) 22%, transparent) 0%, transparent 70%),' +
        'linear-gradient(180deg, var(--t-ground) 0%, var(--t-ground-soft-2) 100%)',
      padding: '40px 24px 24px',
      textAlign: 'center',
      borderBottom: '1px solid var(--t-line)',
    }}>
      <div aria-hidden="true" style={{
        fontFamily: 'var(--font-display)', fontWeight: 300,
        fontSize: 64, lineHeight: 0.9, letterSpacing: '-0.03em',
        color: 'var(--t-accent)',
        margin: '0 0 8px',
      }}>{L.roman}</div>
      <div style={{
        fontFamily: 'var(--font-body)', fontWeight: 700,
        fontSize: 10, letterSpacing: '0.30em', textTransform: 'uppercase',
        color: 'var(--t-text-2)', marginBottom: 14,
      }}>Level {L.roman} · {L.name}</div>
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 12,
      }}>
        <span style={{
          fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 36, color: 'var(--t-text)', letterSpacing: '-0.018em',
        }}>{L.price}</span>
        <span aria-hidden="true" style={{
          width: 4, height: 4, borderRadius: 4, background: 'var(--t-accent)',
        }} />
        <span style={{
          fontFamily: 'var(--font-body)', fontWeight: 600,
          fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'var(--t-text-2)',
        }}>{L.seats}</span>
      </div>
    </div>

    {/* checklist body */}
    <ul style={{
      listStyle: 'none', padding: '20px 24px 28px', margin: 0,
      display: 'flex', flexDirection: 'column',
    }}>
      {rows.map((R, k) => (
        <li key={R.label} style={{
          display: 'grid', gridTemplateColumns: '1fr 28px', alignItems: 'center',
          gap: 12, padding: '12px 0',
          borderTop: k === 0 ? 'none' : '1px solid var(--t-line)',
        }}>
          <span style={{
            fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.45,
            color: R.values[i] ? 'var(--t-text)' : 'var(--t-text-3, var(--t-text-2))',
            opacity: R.values[i] ? 1 : 0.6,
          }}>{R.label}</span>
          <span style={{ justifySelf: 'center' }}>
            <Marker included={R.values[i]} />
          </span>
        </li>
      ))}
    </ul>
  </article>
);

const FoyerAtAGlance = () => (
  <section id="at-a-glance"
    data-screen-label="Foyer · 02 At a Glance"
    style={{
      background: 'var(--t-ground-soft)',
      color: 'var(--t-text)',
      padding: '64px 24px 72px',
      borderTop: '1px solid var(--t-line)',
      position: 'relative',
    }}>

    {/* eyebrow + headline */}
    <div style={{ textAlign: 'center', marginBottom: 36, maxWidth: 720, margin: '0 auto 36px' }}>
      <div style={{
        fontFamily: 'var(--font-body)', fontWeight: 700,
        fontSize: 11, letterSpacing: '0.36em', textTransform: 'uppercase',
        color: 'var(--t-accent)', marginBottom: 14,
      }}>At a Glance</div>
      <h2 style={{
        fontFamily: 'var(--font-display)', fontWeight: 300,
        fontSize: 'clamp(28px, 6vw, 40px)', lineHeight: 1.05,
        letterSpacing: '-0.014em',
        color: 'var(--t-text)', margin: 0,
        textWrap: 'balance',
      }}>
        Three Doorways.{' '}
        <em style={{ fontStyle: 'italic', color: 'var(--t-accent)' }}>
          Side by side.
        </em>
      </h2>
    </div>

    {/* arches */}
    <div style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: 18,
      maxWidth: 1100, margin: '0 auto',
    }} className="foyer-arches">
      {LEVELS.map((L, i) => (
        <FoyerArch key={L.roman} L={L} i={i} rows={GLANCE_ROWS} />
      ))}
    </div>

    {/* footnote */}
    <p style={{
      maxWidth: 720, margin: '32px auto 0',
      fontFamily: 'var(--font-body)', fontSize: 12.5, lineHeight: 1.6,
      color: 'var(--t-text-2)', textAlign: 'center',
      textWrap: 'pretty',
    }}>
      Same Core Curriculum. Same cohort. Same community.{' '}
      <em style={{ fontStyle: 'italic', color: 'var(--t-accent)' }}>
        Your Level shapes the depth.
      </em>
    </p>

    <style>{`
      @media (max-width: 880px) {
        .foyer-arches { grid-template-columns: 1fr !important; max-width: 460px !important; }
      }
    `}</style>
  </section>
);

Object.assign(window, { FoyerAtAGlance });