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

function HealingCard({ item, onPay }) {
  return (
    <Card padding="var(--space-7)" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)', height: '100%' }}>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-3)', alignItems: 'center' }}>
        <Tag tone="accent">{money(item.price, item.currency)}</Tag>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--type-caption-size)', letterSpacing: 'var(--tracking-wider)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{item.duration}</span>
      </div>
      <h3 style={{ fontSize: 'var(--type-h3-size)', margin: 0 }}>{item.name}</h3>
      {item.prerequisite && <p style={{ margin: 0, fontSize: 'var(--type-caption-size)', letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--text-accent)' }}>Prerequisite - {item.prerequisite}</p>}
      <p style={{ margin: 0, fontSize: 'var(--type-small-size)', lineHeight: 1.8, color: 'var(--text-body)' }}>{item.description}</p>
      <div style={{ flex: 1 }}>
        <Eyebrow tone="muted">What is included</Eyebrow>
        <ul style={{ listStyle: 'none', margin: 'var(--space-4) 0 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>
      </div>
      {item.pricingNote && <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)' }}>{item.pricingNote}</p>}
      <div style={{ marginTop: 'auto', paddingTop: 'var(--space-4)', borderTop: '1px solid var(--line-hairline)', display: 'grid', gap: 'var(--space-3)' }}>
        <Button variant="primary" fullWidth style={{ whiteSpace: 'normal', minWidth: 0, padding: '14px 18px', lineHeight: 1.45 }} onClick={() => onPay(item, 'full')}>{item.cta}</Button>
      </div>
    </Card>
  );
}

function Page() {
  const [pay, setPay] = React.useState(null);
  const onPay = (offering, kind) => setPay({ offering, kind });
  return (
    <React.Fragment>
      <Header current="Healings" />
      <main id="main">
        <Section backdrop="atlantic" pattern="soft" patternScale={560} eyebrow="Healings" heading="Healing sessions" level={1} pad="var(--space-9)" style={{ paddingBottom: 'var(--space-6)' }}
          lead="You do not need to arrive with a perfect explanation of what is happening. You may know exactly what you wish to explore, or only feel that something is asking for your attention. Each session is held as an individual experience, with care, privacy and no promise of a predetermined outcome. Sessions are available remotely worldwide, or in person in Cork, Ireland.">
          <p style={{ marginTop: 'var(--space-6)', fontSize: 'var(--type-caption-size)', lineHeight: 1.8, color: 'var(--text-muted)', maxWidth: '80ch' }}>{D.pricingValidity}</p>
        </Section>
        <Section backdrop="tide" pattern="subtle" patternScale={420} pad="var(--space-8)" style={{ paddingTop: 'var(--space-6)' }}>
          <div className="se-cards-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(2,minmax(0,1fr))', gap: 'var(--space-6)', alignItems: 'stretch' }}>
            {D.healings.map(h => <HealingCard key={h.id} item={h} onPay={onPay} />)}
          </div>
        </Section>
        <Section id="policies" backdrop="dawn" pattern="soft" patternScale={340} eyebrow="Booking terms" heading="Payment and cancellation" width="var(--container-text)">
          <div style={{ marginTop: 'var(--space-6)', border: '1px solid var(--line-accent)', background: 'var(--amber-04)', padding: 'var(--space-7)', display: 'grid', gap: 'var(--space-4)' }}>
            <p style={{ margin: 0, fontSize: 'var(--type-body-size)', lineHeight: 1.85, color: 'var(--text-body)' }}>{D.terms.cancellationHealing}</p>
            <p style={{ margin: 0, fontSize: 'var(--type-small-size)', lineHeight: 1.8, color: 'var(--text-secondary)' }}>Pay securely on this page by {D.payment.methods}. A PayPal account is not required.</p>
          </div>
        </Section>
        <Section backdrop="bone" pattern="subtle" patternScale={400} tone="light" eyebrow="Questions" heading="Before you book" width="var(--container-text)">
          <div style={{ marginTop: 'var(--space-7)' }}><Accordion items={D.faq} /></div>
          <div style={{ marginTop: 'var(--space-8)', display: 'flex', gap: 'var(--space-4)', flexWrap: 'wrap' }}>
            <Button variant="outline" href="about.html#book">Send an enquiry instead</Button>
            <Button variant="ghost" href="workshops.html">View workshops &amp; training</Button>
          </div>
        </Section>
      </main>
      <Footer />
      {pay && <PaymentModal offering={pay.offering} kind={pay.kind} onClose={() => setPay(null)} />}
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<Page />);