const { Button, Eyebrow, Card, Divider, Tag, Icon } = window.SolasEyeDesignSystem_10f8ce;

function WorkshopCard({ item, onPay }) {
  const [open, setOpen] = React.useState(false);
  const panelId = `panel-${item.id}`;
  return (
    <Card padding="var(--space-7)" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)', height: '100%' }}>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-3)', alignItems: 'center' }}>
        <Tag tone="accent">{money(item.price, item.currency)}</Tag>
        {item.length && <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--type-caption-size)', letterSpacing: 'var(--tracking-wider)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{item.length}</span>}
      </div>
      {item.date && <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-body)', fontSize: 'var(--type-caption-size)', letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--text-accent)' }}>
        <Icon name="calendar" size={14} />{item.date}
      </div>}
      <h3 style={{ fontSize: 'var(--type-h3-size)', margin: 0 }}>{item.name}</h3>
      <div style={{ display: 'grid', gap: 6, paddingBottom: 'var(--space-4)', borderBottom: '1px solid var(--line-hairline)' }}>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--type-small-size)', color: 'var(--text-secondary)' }}>
          Non-refundable deposit <strong style={{ fontWeight: 600, color: 'var(--text-display)' }}>{money(item.deposit, item.depositCurrency)}</strong>, plus postage &amp; handling, confirmed separately
        </span>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--type-caption-size)', letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--text-accent)' }}>Prerequisite - {item.prerequisite}</span>
      </div>
      <p style={{ margin: 0, fontSize: 'var(--type-small-size)', lineHeight: 1.8, color: 'var(--text-body)' }}>{item.description}</p>
      <button aria-expanded={open} aria-controls={panelId} onClick={() => setOpen(o => !o)}
        style={{ justifySelf: 'start', display: 'inline-flex', alignItems: 'center', gap: 10, background: 'transparent', border: 0, padding: '6px 0', cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 'var(--type-nav-size)', letterSpacing: 'var(--type-nav-tracking)', textTransform: 'uppercase', color: 'var(--text-accent)' }}>
        {open ? 'Hide inclusions' : `Inclusions for ${item.name}`}<Icon name={open ? 'chevron-up' : 'chevron-down'} size={16} />
      </button>
      {open && <div id={panelId} style={{ display: 'grid', gap: 'var(--space-4)' }}>
        <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: 'var(--space-3)' }}>
          {item.includes.map(inc => (
            <li key={inc} style={{ display: 'grid', gridTemplateColumns: '14px 1fr', gap: 'var(--space-3)', fontSize: 'var(--type-small-size)', lineHeight: 1.7, color: 'var(--text-body)' }}>
              <span style={{ color: 'var(--text-accent)' }}>·</span><span>{inc}</span>
            </li>
          ))}
        </ul>
        {item.important && <p style={{ margin: 0, padding: 'var(--space-4)', background: 'var(--amber-04)', border: '1px solid var(--line-accent)', fontSize: 'var(--type-small-size)', lineHeight: 1.7, color: 'var(--text-secondary)' }}><strong style={{ color: 'var(--text-accent)', fontWeight: 600 }}>Important. </strong>{item.important}</p>}
        {item.note && <p style={{ margin: 0, fontSize: 'var(--type-small-size)', lineHeight: 1.75, color: 'var(--text-muted)' }}>{item.note}</p>}
      </div>}
      <div style={{ marginTop: 'auto', display: 'grid', gap: 'var(--space-3)', paddingTop: 'var(--space-4)', borderTop: '1px solid var(--line-hairline)' }}>
        <Button variant="primary" fullWidth style={{ whiteSpace: 'normal', minWidth: 0, padding: '14px 18px', lineHeight: 1.45 }} onClick={() => onPay(item, 'full')}>Pay in full - {money(item.price, item.currency)}</Button>
        <Button variant="outline" fullWidth style={{ whiteSpace: 'normal', minWidth: 0, padding: '14px 18px', lineHeight: 1.45 }} onClick={() => onPay(item, 'deposit')}>Pay non-refundable deposit - {money(item.deposit, item.depositCurrency)}</Button>
      </div>
    </Card>
  );
}

function Group({ title, lead, items, onPay, first }) {
  return (
  <div style={{ marginTop: first ? 'var(--space-4)' : 'var(--space-9)' }}>
      <Eyebrow>{title}</Eyebrow>
      <h2 style={{ fontSize: 'var(--type-h2-size)', margin: 'var(--space-4) 0 0' }}>{lead}</h2>
      <div style={{ height: 1, background: 'var(--gradient-hairline)', margin: 'var(--space-6) 0 var(--space-7)' }} />
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${items.length === 4 ? 2 : Math.min(items.length, 3)},minmax(0,1fr))`, gap: 'var(--space-6)', alignItems: 'stretch' }} className="se-cards-3">
        {items.map(w => <WorkshopCard key={w.id} item={w} onPay={onPay} />)}
      </div>
    </div>
  );
}

function Page() {
  const [pay, setPay] = React.useState(null);
  const onPay = (offering, kind) => setPay({ offering, kind });
  const experiential = D.workshops.filter(w => w.group === 'Experiential Workshops');
  const core = D.workshops.filter(w => w.group === 'Core Training');
  return (
    <React.Fragment>
      <Header current="Workshops & Training" />
      <main id="main">
        <Section backdrop="atlantic" pattern="soft" patternScale={560} eyebrow="Workshops &amp; Training" heading="Learn, experience and practise" level={1} pad="var(--space-9)" style={{ paddingBottom: 'var(--space-6)' }}
          lead="Some people come to this work to receive; others feel called to learn how to engage with it for themselves. These workshops and trainings offer different doorways into the Transference Healing lineage - from gentle, experiential introductions to structured practitioner-level study. You do not need to choose the furthest destination today. Begin with the step that feels honest now.">
          <div style={{ marginTop: 'var(--space-7)', display: 'grid', gap: 'var(--space-4)', maxWidth: '86ch' }}>
            <p style={{ margin: 0, fontSize: 'var(--type-caption-size)', lineHeight: 1.8, color: 'var(--text-muted)' }}>{D.pricingValidity}</p>
            <p style={{ margin: 0, fontSize: 'var(--type-caption-size)', lineHeight: 1.8, color: 'var(--text-muted)' }}>Upcoming dates: <Placeholder>{D.placeholders.upcomingDates}</Placeholder> · Taught in person only · Location: {D.placeholders.location}</p>
          </div>
        </Section>
        <Section backdrop="tide" pattern="subtle" patternScale={420} pad="var(--space-6)">
          <Group first title="Experiential Workshops" lead="Doorways in" items={experiential} onPay={onPay} />
          <Group title="Core Training" lead="Structured study" items={core} onPay={onPay} />
          <div id="policies" style={{ marginTop: 'var(--space-9)', border: '1px solid var(--line-accent)', background: 'var(--amber-04)', padding: 'var(--space-7)', display: 'grid', gap: 'var(--space-5)' }}>
            <div>
              <Eyebrow>Deposit policy</Eyebrow>
              <p style={{ margin: 'var(--space-4) 0 0', fontSize: 'var(--type-small-size)', lineHeight: 1.85, color: 'var(--text-body)', maxWidth: '84ch' }}>
                {D.depositPolicy}
              </p>
            </div>
            <div>
              <Eyebrow>{D.terms.balanceDueHeading}</Eyebrow>
              <p style={{ margin: 'var(--space-4) 0 0', fontSize: 'var(--type-small-size)', lineHeight: 1.85, color: 'var(--text-body)', maxWidth: '84ch' }}>{D.terms.balanceDue}</p>
            </div>
            <div>
              <Eyebrow>Cancellation</Eyebrow>
              <p style={{ margin: 'var(--space-4) 0 0', fontSize: 'var(--type-small-size)', lineHeight: 1.85, color: 'var(--text-body)', maxWidth: '84ch' }}>{D.terms.cancellationTraining}</p>
            </div>
          </div>
        </Section>
        <Section backdrop="bone" pattern="subtle" patternScale={400} tone="light" width="var(--container-text)" eyebrow="Certification" heading="How the training pathway completes">
          <p style={{ margin: 'var(--space-5) 0 var(--space-7)', fontSize: 'var(--type-body-size)', lineHeight: 1.85, color: 'var(--text-body)' }}>
            Completion of Advanced Training with Sinéad qualifies the student to attend the required resit with Alexis Cartwright to complete certification as a Transference Healing practitioner. Sinéad does not grant final practitioner certification.
          </p>
          <Button variant="outline" href="about.html#book">Enquire about dates</Button>
        </Section>
      </main>
      <Footer />
      {pay && <PaymentModal offering={pay.offering} kind={pay.kind} onClose={() => setPay(null)} />}
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<Page />);