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

const downloads = [
  { icon: 'file-text', name: 'Case File Cover Sheet' },
  { icon: 'file-text', name: 'Meeting Prep Sheet' },
  { icon: 'file-text', name: 'Support Map' },
  { icon: 'git-branch', name: 'Escalation Decision Tree' },
  { icon: 'file-text', name: 'Quick Reference Cheat Sheet' },
  { icon: 'table', name: 'Documentation Toolkit (tracker)' },
];

function WorkshopGuide() {
  return (
    <section id="kit" style={{ padding: '64px 48px 96px', background: 'var(--surface-page)' }}>
      <div style={{ maxWidth: 560, margin: '0 auto' }}>
        <div style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden', marginBottom: 24, boxShadow: 'var(--shadow-md)' }}>
          <img
            src="./images/book-session-couch.jpg"
            alt="Parent and child working through materials together, smiling"
            style={{ width: '100%', height: 220, objectFit: 'cover', display: 'block' }}
          />
        </div>
        <Badge variant="primary">Advocacy workshop guide · $39</Badge>
        <h2 style={{ font: 'var(--text-display-lg)', color: 'var(--text-primary)', margin: '14px 0 8px' }}>Work through it yourself</h2>
        <p style={{ font: 'var(--text-body-md)', color: 'var(--text-secondary)', marginBottom: 28 }}>
          Worksheets and a documentation tracker to map your situation, request records, and prepare for meetings — at your own pace.
        </p>

        <Card>
          <div style={{ font: 'var(--text-label)', color: 'var(--text-primary)', marginBottom: 12 }}>What's included</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 24 }}>
            {downloads.map((d) => (
              <div
                key={d.name}
                style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  padding: '12px 14px', borderRadius: 'var(--radius-md)',
                  border: '1px solid var(--border-subtle)', color: 'var(--text-primary)',
                }}
              >
                <Icon name={d.icon} size={18} style={{ color: 'var(--color-primary)', flex: 'none' }} />
                <span style={{ font: 'var(--text-body-sm)' }}>{d.name}</span>
              </div>
            ))}
          </div>
          <Button variant="primary" size="lg" icon="download-cloud" iconPosition="left" onClick={() => window.open('https://payhip.com/b/s6F3Q', '_blank')}>
            Get the guide — $39
          </Button>
        </Card>
      </div>
    </section>
  );
}
window.WorkshopGuide = WorkshopGuide;