const { Badge } = window.AS || {};

function RouterQuiz() {
  return (
    <section id="quiz" style={{ padding: '56px 48px 64px', background: 'var(--surface-page)' }}>
      <div style={{ maxWidth: 'var(--content-max-width)', margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 560px', gap: 48, alignItems: 'center' }}>
        <div>
          <Badge variant="secondary">Start here</Badge>
          <h2 style={{ font: 'var(--text-display-lg)', color: 'var(--text-primary)', margin: '14px 0 8px' }}>
            Having an issue with your child's school?
          </h2>
          <p style={{ font: 'var(--text-body-md)', color: 'var(--text-secondary)', maxWidth: 440 }}>
            Two quick questions. We'll tell you your first move now, and whether the self-guided kit or a clarity session fits where you are.
          </p>
        </div>
        <div style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-lg, 0 18px 44px -28px rgba(20,106,98,0.55))', border: '1px solid var(--border-subtle)' }}>
          <iframe
            src="./router.html?v=quicksand-mulish"
            title="Advocate Smart — where are you right now?"
            style={{ width: '100%', height: 620, border: 'none', display: 'block' }}
          />
        </div>
      </div>
    </section>
  );
}
window.RouterQuiz = RouterQuiz;