const { Button, Eyebrow, Card, Divider, Input, Textarea, Select, Checkbox, FieldGroup, Icon } = window.SolasEyeDesignSystem_10f8ce;

function EnquiryForm() {
  const [form, setForm] = React.useState({ name: '', email: '', zone: '', interest: '', format: 'Unsure', message: '' });
  const [consent, setConsent] = React.useState(false);
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const options = ['', ...D.healings.map(h => h.name), ...D.workshops.map(w => w.name), 'Not sure yet'];
  const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim());
  const canSend = consent && form.name.trim() && emailValid && status !== 'sending';
  const send = async () => {
    if (!canSend) return;
    setStatus('sending');
    try {
      const res = await fetch('/api/enquiry', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (!res.ok) throw new Error('bad status ' + res.status);
      setStatus('sent');
    } catch (err) {
      console.log('[v0] enquiry submit failed', err);
      setStatus('error');
    }
  };
  return (
    <form noValidate onSubmit={e => { e.preventDefault(); send(); }}
      style={{ border: '1px solid var(--line-hairline)', background: 'var(--surface-card)', padding: 'var(--space-8)', display: 'grid', gap: 'var(--space-7)', borderRadius: 'var(--radius-sm)' }}>
      <FieldGroup columns={2} legend="Enquiry">
        <Input label="Name" value={form.name} onChange={set('name')} autoComplete="name" required />
        <Input label="Email" type="email" value={form.email} onChange={set('email')} autoComplete="email" required />
        <Input label="Country / time zone" value={form.zone} onChange={set('zone')} placeholder="Ireland · GMT+1" />
        <Select label="Preferred format" value={form.format} onChange={set('format')} options={['Remote', 'In person', 'Unsure']} />
      </FieldGroup>
      <Select label="I am interested in" value={form.interest} onChange={set('interest')}
        options={options.map(o => ({ value: o, label: o || 'Select an offering' }))} />
      <Textarea label="Message" rows={5} value={form.message} onChange={set('message')}
        hint="A few honest lines are enough. You do not need to tell your whole story here." />
      <p style={{ margin: 0, fontSize: 'var(--type-caption-size)', lineHeight: 1.8, color: 'var(--text-muted)' }}>
        We will use the information you provide to respond to your enquiry and, if requested, take steps to arrange a session or workshop. Please do not include medical or health information in this form. For details, see our <a href={D.placeholders.privacyPolicyUrl}>privacy policy</a>.
      </p>
      <Checkbox checked={consent} onChange={setConsent}
        label={<span>I consent to Sinéad contacting me about this enquiry, and I have read the <a href={D.placeholders.privacyPolicyUrl}>privacy policy</a>.</span>} />
      <div style={{ display: 'grid', gap: 'var(--space-4)' }}>
        <Button variant="primary" fullWidth disabled={!canSend} onClick={send}>
          {status === 'sending' ? 'Sending…' : status === 'sent' ? 'Enquiry sent' : 'Send enquiry'}
        </Button>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 'var(--space-3)' }}>
  <Button variant="outline" fullWidth href="healings.html">View sessions</Button>
  <Button variant="outline" fullWidth href="workshops.html">View workshops</Button>
  </div>
      </div>
      <p style={{ margin: 0, fontSize: 'var(--type-caption-size)', lineHeight: 1.8, color: 'var(--text-muted)' }}>
        Your enquiry is sent securely to <a href={`mailto:${D.placeholders.enquiryEmail}`}>{D.placeholders.enquiryEmail}</a>. We reply to the email address you provide.
      </p>
      {status === 'sent' && <p role="status" style={{ margin: 0, padding: 'var(--space-4)', border: '1px solid var(--line-accent)', background: 'var(--amber-04)', fontSize: 'var(--type-small-size)', color: 'var(--text-accent)' }}>
        Thank you — your enquiry has been sent. Sinéad will reply to {form.email} as soon as she can.
      </p>}
      {status === 'error' && <p role="alert" style={{ margin: 0, padding: 'var(--space-4)', border: '1px solid var(--line-accent)', background: 'var(--amber-04)', fontSize: 'var(--type-small-size)', color: 'var(--text-accent)' }}>
        Something went wrong sending your enquiry. Please try again, or email <a href={`mailto:${D.placeholders.enquiryEmail}`}>{D.placeholders.enquiryEmail}</a> directly.
      </p>}
    </form>
  );
}

function Page() {
  return (
    <React.Fragment>
      <Header current="About & Book" />
      <main id="main">
        <Section backdrop="atlantic" pattern="soft" patternScale={560} eyebrow="About" heading="A grounded way into deep work" level={1} pad="var(--space-9)">
          <div className="se-about-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,300px)', gap: 'clamp(32px,6vw,80px)', alignItems: 'start', marginTop: 'var(--space-7)' }}>
            <div style={{ display: 'grid', gap: 'var(--space-5)', maxWidth: '64ch' }}>
              <p style={{ margin: 0, fontSize: 'var(--type-lead-size)', lineHeight: 1.8, color: 'var(--text-secondary)' }}>
                I have never been interested in asking people to hand their power away. Self healing is just that - YOU are your own sovereign self, and this work asks you to be willing to delve within and take ownership and accountability for your own life.
              </p>
              <p style={{ margin: 0, fontSize: 'var(--type-body-size)', lineHeight: 1.85, color: 'var(--text-body)' }}>
                It is not a simple task to be brutally honest with yourself and own your part in every situation you have experienced. I believe meaningful change asks for honesty, receptivity and a willingness to meet what is actually present - not what we think or wish should be present. Victim or perpetrator, we have been each one at different times.
              </p>
              <p style={{ margin: 0, fontSize: 'var(--type-body-size)', lineHeight: 1.85, color: 'var(--text-body)' }}>
                My own nature bridges two worlds. I am analytical and grounded, and I am also intuitive, energetic and spiritually curious. I care about precision, but I also know that not everything meaningful can be reduced to a neat explanation. SolasEye grew from that meeting place: earth and the infinite, discernment and surrender, the visible and what lies beneath it.
              </p>
              <p style={{ margin: 0, fontSize: 'var(--type-body-size)', lineHeight: 1.85, color: 'var(--text-body)' }}>
                As a trained Transference Healing practitioner and teacher, I offer private healings, experiential workshops and the Fundamental and Advanced Trainings. My role is to hold the work with integrity and compassion, while remembering that your own inner authority remains central.
              </p>
              <p style={{ margin: 0, fontSize: 'var(--type-small-size)', color: 'var(--text-muted)' }}>Practice location: {D.placeholders.location}</p>
            </div>
            <div style={{ display: 'grid', justifyItems: 'center', gap: 'var(--space-4)' }}>
              <Portrait width={300} />
              <div style={{ marginTop: 14 }}><IrisPortal size={120} breathe={false} /></div>
            </div>
          </div>
        </Section>
        <Section backdrop="bone" pattern="subtle" patternScale={400} tone="light" width="var(--container-text)" eyebrow="Lineage" heading="Honouring the lineage">
          <p style={{ margin: 'var(--space-5) 0 0', fontSize: 'var(--type-body-size)', lineHeight: 1.85, color: 'var(--text-body)' }}>
            Transference Healing was channelled, anchored and founded by Alexis Cartwright. SolasEye is Sinéad O’Sullivan’s independent practice and offers healings, workshops and trainings within the Transference Healing lineage. SolasEye is not the official Transference Healing website.
          </p>
          <p style={{ margin: 'var(--space-6) 0 0' }}>
            <a href={D.footer.officialSourceUrl} rel="noopener noreferrer" target="_blank">{D.footer.officialSourceLabel}</a>
          </p>
        </Section>
        <Section id="book" backdrop="dawn" pattern="medium" patternScale={380} eyebrow="Book or enquire" heading="Begin where you are"
          lead="If you know which session or course is right for you, you can continue directly to payment. If you are unsure, send a short note. You do not need to tell your whole story in a form; a few honest lines are enough to begin.">
          <div className="se-book-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,440px)', gap: 'clamp(32px,6vw,72px)', alignItems: 'start', marginTop: 'var(--space-8)' }}>
            <div style={{ display: 'grid', gap: 'var(--space-6)' }}>
              <div>
                <Eyebrow>Secure online payment</Eyebrow>
                <p style={{ margin: 'var(--space-4) 0 0', fontSize: 'var(--type-small-size)', lineHeight: 1.8, color: 'var(--text-body)', maxWidth: '52ch' }}>
                  Choose your session or workshop and pay directly on this site by {D.payment.methods}. A PayPal account is not required. Healing sessions are paid in full; workshops and trainings can be secured with a deposit.
                </p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-3)', marginTop: 'var(--space-5)' }}>
                  <Button variant="primary" href="healings.html">Book a healing</Button>
                  <Button variant="outline" href="workshops.html">Reserve a workshop</Button>
                </div>
              </div>
              <div>
                <Eyebrow>Contact</Eyebrow>
                <ul style={{ listStyle: 'none', margin: 'var(--space-4) 0 0', padding: 0, display: 'grid', gap: 'var(--space-3)', fontSize: 'var(--type-small-size)', color: 'var(--text-body)' }}>
                  <li>Email <a href={`mailto:${D.placeholders.contactEmail}`}>{D.placeholders.contactEmail}</a></li>
                  <li>Phone / WhatsApp <a href="https://wa.me/353877734444" rel="noopener noreferrer" target="_blank">{D.placeholders.phone}</a></li>
                  <li>Upcoming dates <a href="workshops.html">listed on each workshop</a></li>
                </ul>
              </div>
              <p style={{ margin: 0, fontSize: 'var(--type-caption-size)', lineHeight: 1.8, color: 'var(--text-muted)', maxWidth: '52ch' }}>{D.payment.confirmationNote}</p>
            </div>
            <EnquiryForm />
          </div>
        </Section>
      </main>
      <Footer />
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<Page />);