const { Card, Icon, Badge } = window.AS || {};

const whoFor = [
  "A concern hasn't been formally addressed yet, and you don't know how to start",
  "You've got a meeting coming up and don't want to walk in blind",
  "You can feel a pattern, but you can't quite prove it yet",
  "You need to send a school email and don't trust yourself to keep it calm",
  "You've been going back and forth for months and getting nowhere",
];

const steps = [
  { title: 'Complete the intake form.', body: 'Tell me what\u2019s happening, what you\u2019ve already tried, and what you hope to accomplish.' },
  { title: 'Schedule and pay.', body: 'Choose your appointment time and complete payment to reserve your session.' },
  { title: 'I review your information.', body: 'I\u2019ll look over your intake and selected documents before we meet.' },
  { title: 'We sort it out together.', body: 'We\u2019ll organize the facts, clarify your priorities, and decide what you need to do next.' },
  { title: 'Receive your action summary.', body: 'After the session, you\u2019ll receive a concise written recap of your next steps.' },
];

const includes = [
  'Review of your intake form before we meet',
  'Review of selected documents',
  'A 60-minute virtual session',
  'Help organizing the timeline and key facts',
  'Guidance on what to document',
  'Support identifying your main questions and desired outcome',
  'Help preparing for a meeting, email, or next conversation',
  'A written summary of your recommended next steps',
];

const outcomes = [
  'A clearer understanding of the situation',
  'An organized timeline',
  'A focused list of questions',
  'A draft or outline for school communication',
  'A meeting preparation plan',
  'Clear next steps',
];

function BookSession() {
  return (
    <section id="book" style={{ padding: '64px 48px 96px', background: 'var(--surface-sunken)' }}>
      <div style={{ maxWidth: 680, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 32, alignItems: 'center', marginBottom: 40 }}>
          <div style={{ flex: '1 1 280px', minWidth: 0 }}>
            <h2 style={{ font: 'var(--text-display-lg)', color: 'var(--text-primary)', marginBottom: 10 }}>
              Something's off at school, and you don't know what to do next.
            </h2>
            <p style={{ font: 'var(--text-body-lg)', color: 'var(--text-secondary)', marginBottom: 0 }}>
              Book a session. We'll map what's happening, build your paper trail, and figure out your next move together.
            </p>
          </div>
          <div style={{ flex: '0 1 240px', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-md)' }}>
            <img
              src="./images/hero-mom-daughter.jpg"
              alt="Parent comforting an upset child at home"
              style={{ width: '100%', height: 180, objectFit: 'cover', display: 'block' }}
            />
          </div>
        </div>

        <div style={{ font: 'var(--text-label)', color: 'var(--color-primary)', marginBottom: 12 }}>What it's for</div>
        <p style={{ font: 'var(--text-caption)', color: 'var(--text-muted)', marginBottom: 14 }}>This is for you if:</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 40 }}>
          {whoFor.map((w) => (
            <div key={w} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
              <Icon name="check" size={16} style={{ color: 'var(--color-primary)', marginTop: 3, flex: 'none' }} />
              <span style={{ font: 'var(--text-body-md)', color: 'var(--text-secondary)' }}>{w}</span>
            </div>
          ))}
        </div>

        <div style={{ font: 'var(--text-label)', color: 'var(--color-primary)', marginBottom: 16 }}>How it works</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20, marginBottom: 20 }}>
          {steps.map((s, i) => (
            <div key={s.title} style={{ display: 'flex', gap: 16 }}>
              <div style={{
                width: 32, height: 32, borderRadius: '50%', flex: 'none',
                background: 'var(--color-primary)', color: 'var(--text-on-primary)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', font: 'var(--text-label)',
              }}>{i + 1}</div>
              <div>
                <div style={{ font: 'var(--text-body-md)', color: 'var(--text-primary)', fontWeight: 600, marginBottom: 4 }}>{s.title}</div>
                <div style={{ font: 'var(--text-body-sm)', color: 'var(--text-secondary)' }}>{s.body}</div>
              </div>
            </div>
          ))}
        </div>

        <p style={{ font: 'var(--text-caption)', color: 'var(--text-muted)', marginBottom: 40 }}>
          This comes up often around IEPs, 504s, evaluations, and discipline meetings — but the process works for any school concern, formal or not.
        </p>

        <Card style={{ marginBottom: 24 }}>
          <Badge variant="primary">Parent Advocacy Clarity Session · $199</Badge>
          <p style={{ font: 'var(--text-body-md)', color: 'var(--text-secondary)', margin: '14px 0 0' }}>
            When something is happening at school, it can be hard to know what matters, what to document, what to say, or what to do next. This personalized session helps you organize the situation, identify the key facts, clarify your goal, and prepare to communicate with the school in a calm, focused, and effective way.
          </p>

          <div style={{ font: 'var(--text-label)', color: 'var(--text-primary)', margin: '24px 0 10px' }}>Your session includes</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 20 }}>
            {includes.map((w) => (
              <div key={w} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                <Icon name="check" size={16} style={{ color: 'var(--color-primary)', marginTop: 3, flex: 'none' }} />
                <span style={{ font: 'var(--text-body-sm)', color: 'var(--text-secondary)' }}>{w}</span>
              </div>
            ))}
          </div>

          <div style={{ font: 'var(--text-label)', color: 'var(--text-primary)', margin: '0 0 10px' }}>You may leave with</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {outcomes.map((w) => (
              <div key={w} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                <Icon name="arrow-right" size={16} style={{ color: 'var(--color-primary)', marginTop: 3, flex: 'none' }} />
                <span style={{ font: 'var(--text-body-sm)', color: 'var(--text-secondary)' }}>{w}</span>
              </div>
            ))}
          </div>

          <div style={{ font: 'var(--text-caption)', color: 'var(--text-muted)', marginTop: 20 }}>Informational support, not legal advice.</div>
        </Card>

        <div id="intake-form">
          <Card>
            <iframe
              src="https://forms.fillout.com/t/nW7TYGJUSqus?embed=1"
              title="Parent Advocacy Clarity Session intake form"
              style={{ width: '100%', height: 620, border: 'none', display: 'block' }}
              loading="lazy"
            />
          </Card>
        </div>
      </div>
    </section>
  );
}
window.BookSession = BookSession;