/* global React, Icon, Imagery, Reveal, SectionHeader, Accordion, SERVICES, APPROACHES, TEAM, TESTIMONIALS, FAQS */
const { useState: useStateO, useEffect: useEffectO } = React;

/* ─────────────────────────────────────────────
   ABOUT
   ───────────────────────────────────────────── */
const AboutPage = ({ onNavigate }) => (
  <div className="page">
    <PageHero
      eyebrow="About Shifa Services"
      title={<>A practice rooted in <em style={{ fontStyle: 'italic', color: 'var(--sage)' }}>healing, restoration,</em> and trust.</>}
      lede="Shifa Services is a private counselling and family support practice offering thoughtful, culturally and spiritually aware care for individuals, couples, families, and communities."
    />
    <section style={{ background: 'var(--cream)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 100, alignItems: 'center' }} className="ab-grid">
          <Reveal>
            <div style={{ aspectRatio: '4/5', borderRadius: 8, background: 'var(--forest-deep)', color: 'var(--cream)', padding: 56, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at top right, rgba(201,182,135,0.18), transparent 60%)' }} />
              <div className="eyebrow" style={{ color: 'var(--gold-soft)', position: 'relative' }}>Shifa · شفاء</div>
              <div style={{ position: 'relative' }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(48px, 4.6vw, 84px)', lineHeight: 1, fontStyle: 'italic', color: 'var(--cream)', marginBottom: 28 }}>
                  Healing.<br/>Restoration.<br/>Trust.
                </div>
                <div style={{ width: 56, height: 1, background: 'var(--gold)', marginBottom: 28 }} />
                <p style={{ fontSize: 15, color: 'rgba(251,247,239,0.78)', lineHeight: 1.7, maxWidth: 380 }}>
                  Three words that shape how we sit with every person who walks through our door — whether for a single conversation or a long season of care.
                </p>
              </div>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div className="eyebrow" style={{ marginBottom: 22 }}><span className="dot" />Our philosophy</div>
            <h2 style={{ marginBottom: 28 }}>Care for the whole person.</h2>
            <p className="lede" style={{ marginBottom: 24 }}>
              Healing rarely follows a straight line. It moves at the pace of trust and unfolds in spaces where a person feels seen, respected, and held with care.
            </p>
            <p style={{ color: '#5a5a52' }}>
              Our work integrates evidence-informed therapy with cultural humility and spiritual awareness. We hold space for the emotional, relational, and meaning-making layers of a person's life without forcing them apart.
            </p>
          </Reveal>
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .ab-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }`}</style>
    </section>
    <section>
      <div className="container">
        <SectionHeader eyebrow="Values" title="What guides our practice." align="center" />
        <div style={{ marginTop: 72, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }} className="vals-grid">
          {[
            { icon: 'lock', t: 'Confidentiality', d: 'Every conversation is held with discretion and respect.' },
            { icon: 'globe', t: 'Cultural humility', d: 'Care that meets faith, family, and culture without judgement.' },
            { icon: 'heart', t: 'Compassion', d: 'A warm, unhurried approach that honours the work of healing.' },
            { icon: 'star', t: 'Excellence', d: 'Evidence-informed practice held to the highest professional standards.' }
          ].map((v, i) => (
            <Reveal key={i} delay={i * 80}>
              <div>
                <div style={{ width: 48, height: 48, borderRadius: 12, background: 'var(--ivory)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--forest)', marginBottom: 24 }}>
                  <Icon name={v.icon} size={22} />
                </div>
                <h4 style={{ marginBottom: 12 }}>{v.t}</h4>
                <p style={{ fontSize: 14, color: '#5a5a52' }}>{v.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .vals-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 560px) { .vals-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
    <FinalBand onNavigate={onNavigate} />
  </div>
);

/* ─────────────────────────────────────────────
   SERVICES
   ───────────────────────────────────────────── */
const ServicesPage = ({ onNavigate }) => {
  const detail = [
    { ...SERVICES[0], for: 'Adults navigating anxiety, depression, trauma, grief, and life transitions.', concerns: ['Anxiety', 'Depression', 'Trauma', 'Self-esteem', 'Life transitions'] },
    { ...SERVICES[1], for: 'Couples seeking deeper connection or working through conflict.', concerns: ['Communication', 'Conflict resolution', 'Intimacy', 'Trust', 'Reconnection'] },
    { ...SERVICES[2], for: 'Families moving through change, conflict, or generational distance.', concerns: ['Conflict', 'Parenting', 'Communication', 'Loss', 'Adjustment'] },
    { ...SERVICES[3], for: 'Children, adolescents, and young adults finding their footing.', concerns: ['Anxiety', 'Bullying', 'School stress', 'Identity', 'Family conflict'] },
    { ...SERVICES[4], for: 'Muslim individuals, couples, and families seeking faith-informed support.', concerns: ['Marriage', 'Parenting', 'Faith & identity', 'Migration', 'Mediation'] },
    { ...SERVICES[5], for: 'Families involved with child welfare seeking advocacy and clarity.', concerns: ['Advocacy', 'Family reunification', 'Parenting capacity', 'Wellness planning'] },
    { ...SERVICES[6], for: 'Couples preparing for marriage with honest, structured conversation.', concerns: ['Compatibility', 'Communication', 'Family of origin', 'Finances', 'Future'] },
    { ...SERVICES[7], for: 'Couples and families navigating separation with care.', concerns: ['Mediation', 'Co-parenting', 'Agreements', 'Transition'] },
    { ...SERVICES[8], for: 'Schools, organizations, and community bodies.', concerns: ['Equity', 'Inclusion', 'Mental health policy', 'Cultural competency'] },
    { ...SERVICES[9], for: 'Communities and groups seeking education and skills.', concerns: ['Mental health', 'Family systems', 'Spirituality', 'Youth'] }
  ];
  return (
    <div className="page">
      <PageHero
        eyebrow="Services"
        title={<>Thoughtful support for <em style={{ fontStyle: 'italic', color: 'var(--sage)' }}>every stage</em> of life.</>}
        lede="A complete view of the support available at Shifa Services. Each service is offered in a private, respectful environment and tailored to your needs."
      />
      <section>
        <div className="container">
          {detail.map((s, i) => (
            <Reveal key={i}>
              <div style={{ display: 'grid', gridTemplateColumns: '0.4fr 1.6fr 1fr', gap: 48, padding: '56px 0', borderTop: '1px solid var(--line)', alignItems: 'flex-start' }} className="svc-row">
                <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
                  <div style={{ width: 56, height: 56, borderRadius: 14, background: 'var(--cream)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--forest)' }}>
                    <Icon name={s.icon} size={24} />
                  </div>
                  <div className="eyebrow" style={{ display: 'none' }} className="num-only">0{i+1}</div>
                </div>
                <div>
                  <h3 style={{ marginBottom: 16 }}>{s.title}</h3>
                  <p style={{ color: '#5a5a52', marginBottom: 18, maxWidth: 560 }}>{s.body}</p>
                  <p style={{ fontSize: 14, color: 'var(--sage)', fontStyle: 'italic', marginBottom: 8 }}>Who it's for</p>
                  <p style={{ fontSize: 14, color: '#4a4a42', maxWidth: 560 }}>{s.for}</p>
                </div>
                <div>
                  <p className="eyebrow" style={{ marginBottom: 14 }}>Common concerns</p>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    {s.concerns.map((c, j) => <span key={j} className="tag" style={{ fontSize: 11 }}>{c}</span>)}
                  </div>
                  <button className="btn btn-ghost" style={{ marginTop: 18, padding: 0 }} onClick={() => onNavigate('contact')}>
                    <span style={{ borderBottom: '1px solid var(--line)', paddingBottom: 4 }}>Book consultation</span>
                    <Icon name="arrow" size={14} />
                  </button>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
        <style>{`@media (max-width: 900px) { .svc-row { grid-template-columns: 1fr !important; gap: 24px !important; } }`}</style>
      </section>
      <FinalBand onNavigate={onNavigate} />
    </div>
  );
};

/* ─────────────────────────────────────────────
   TEAM
   ───────────────────────────────────────────── */
const TeamPage = ({ onNavigate }) => (
  <div className="page">
    <PageHero
      eyebrow="The team"
      title={<>Experienced practitioners. <em style={{ fontStyle: 'italic', color: 'var(--sage)' }}>Compassionate</em> care.</>}
      lede="Our team brings decades of combined experience in clinical practice, family mediation, community leadership, and faith-informed family support."
    />
    <section style={{ background: 'var(--cream)' }}>
      <div className="container">
        {TEAM.map((m, i) => (
          <Reveal key={i}>
            <div style={{ padding: '72px 0', borderTop: i > 0 ? '1px solid var(--line)' : 'none' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr 1.6fr', gap: 56, alignItems: 'flex-start' }} className="team-row">
                <div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 72, color: 'var(--sage)', lineHeight: 1, fontStyle: 'italic', fontWeight: 400 }}>0{i+1}</div>
                  <div style={{ width: 40, height: 1, background: 'var(--gold)', marginTop: 16 }} />
                </div>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 16 }}>{m.creds}</div>
                  <h2 style={{ marginBottom: 16, fontSize: 'clamp(36px, 4.4vw, 64px)' }}>{m.name}</h2>
                  <p style={{ fontSize: 17, color: 'var(--sage)', fontStyle: 'italic' }}>{m.spec}</p>
                </div>
                <div>
                  <p className="lede" style={{ marginBottom: 20 }}>{m.bio}</p>
                  <p style={{ color: '#5a5a52', marginBottom: 28 }}>
                    Brings a relational, unhurried presence to every client. Believes in care that respects context, story, and the courage it takes to ask for support.
                  </p>
                  <button className="btn btn-secondary" onClick={() => onNavigate('contact')}>
                    Request session with {m.name.split(' ').slice(-1)[0]} <Icon name="arrow" size={16} />
                  </button>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
      <style>{`@media (max-width: 900px) { .team-row { grid-template-columns: 1fr !important; gap: 24px !important; } }`}</style>
    </section>
    <FinalBand onNavigate={onNavigate} />
  </div>
);

/* ─────────────────────────────────────────────
   WORKSHOPS
   ───────────────────────────────────────────── */
const WorkshopsPage = ({ onNavigate }) => {
  const workshops = [
    { title: 'Happily Ever After', sub: 'A Premarital Workshop', img: 'workshopA', d: 'A structured, honest preparation for marriage covering communication, finances, family of origin, and shared values.' },
    { title: 'Mental Health & Islam', sub: 'A Family Workshop', img: 'workshopB', d: 'A thoughtful introduction to mental health within an Islamic framework for families and community members.' },
    { title: 'My Parents Just Don\u2019t Get It', sub: 'A Workshop for Muslim Youth', img: 'workshopC', d: 'A safe, peer-supported space for Muslim youth navigating identity, family, and the bridge between worlds.' }
  ];
  const training = [
    'Diversity, equity, and inclusion',
    'Mental health and spirituality',
    'Cultural sensitivity',
    'Supporting Muslim clients and families',
    'Anti-oppression and anti-racism',
    'Family systems and community support'
  ];
  return (
    <div className="page">
      <PageHero
        eyebrow="Workshops & Training"
        title={<>Learning that <em style={{ fontStyle: 'italic', color: 'var(--sage)' }}>strengthens</em> families and communities.</>}
        lede="Psychoeducational workshops, skills-based learning, and institutional consultation for families, communities, and organizations seeking depth around mental health, spirituality, and family well-being."
      />
      <section>
        <div className="container">
          <SectionHeader eyebrow="Featured workshops" title="Workshops shaped by lived experience." />
          <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="ws-grid">
            {workshops.map((w, i) => (
              <Reveal key={i} delay={i * 80}>
                <div className="card" style={{ padding: 0, overflow: 'hidden', height: '100%' }}>
                  <Imagery variant={w.img} aspect="4/3" style={{ borderRadius: 0 }} />
                  <div style={{ padding: 32 }}>
                    <div className="eyebrow" style={{ marginBottom: 12 }}>{w.sub}</div>
                    <h4 style={{ marginBottom: 14 }}>{w.title}</h4>
                    <p style={{ fontSize: 14, color: '#5a5a52', marginBottom: 20 }}>{w.d}</p>
                    <a className="link-arrow" onClick={() => onNavigate('contact')}>Inquire <Icon name="arrow" size={14} /></a>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .ws-grid { grid-template-columns: 1fr !important; } }`}</style>
      </section>
      <section style={{ background: 'var(--forest-deep)', color: 'var(--cream)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }} className="tr-grid">
            <Reveal>
              <div className="eyebrow" style={{ color: 'var(--gold-soft)', marginBottom: 22 }}>
                <span className="dot" style={{ background: 'var(--gold-soft)' }} />Institutional training
              </div>
              <h2 style={{ color: 'var(--cream)', marginBottom: 28 }}>
                Training tailored to <em style={{ fontStyle: 'italic', color: 'var(--gold-soft)' }}>your organization.</em>
              </h2>
              <p className="lede" style={{ color: 'rgba(251,247,239,0.78)', marginBottom: 32 }}>
                Strategic consultation and training for schools, healthcare organizations, community bodies, and faith-based institutions.
              </p>
              <button className="btn btn-primary" style={{ background: 'var(--cream)', color: 'var(--forest-deep)' }} onClick={() => onNavigate('contact')}>
                Request a proposal <Icon name="arrow" size={16} />
              </button>
            </Reveal>
            <Reveal delay={120}>
              <div className="eyebrow" style={{ color: 'var(--gold-soft)', marginBottom: 22 }}>Topics</div>
              {training.map((t, i) => (
                <div key={i} style={{ padding: '18px 0', borderBottom: '1px solid rgba(251,247,239,0.12)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontFamily: 'var(--serif)', fontSize: 20, color: 'var(--cream)' }}>{t}</span>
                  <span style={{ color: 'var(--gold-soft)', fontSize: 13 }}>0{i+1}</span>
                </div>
              ))}
            </Reveal>
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .tr-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }`}</style>
      </section>
      <FinalBand onNavigate={onNavigate} />
    </div>
  );
};

/* ─────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────── */
const FAQPage = ({ onNavigate }) => (
  <div className="page">
    <PageHero
      eyebrow="Frequently asked"
      title={<>Questions answered with <em style={{ fontStyle: 'italic', color: 'var(--sage)' }}>care.</em></>}
      lede="A quiet space to find clarity before the conversation begins. If your question isn't here, please reach out."
    />
    <section style={{ background: 'var(--cream)' }}>
      <div className="container-narrow">
        <Accordion items={FAQS} defaultOpen={0} />
      </div>
    </section>
    <FinalBand onNavigate={onNavigate} />
  </div>
);

/* ─────────────────────────────────────────────
   CONTACT
   ───────────────────────────────────────────── */
const ContactPage = ({ onNavigate }) => {
  const [form, setForm] = useStateO({
    name: '', email: '', phone: '', service: '', appointment: '', message: '', consent: false
  });
  const [errors, setErrors] = useStateO({});
  const [submitted, setSubmitted] = useStateO(false);

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Please share your name.';
    if (!form.email.trim()) e.email = 'Email is required.';
    else if (!/^\S+@\S+\.\S+$/.test(form.email)) e.email = 'Please enter a valid email.';
    if (!form.message.trim()) e.message = 'A short note helps us prepare.';
    if (!form.consent) e.consent = 'Please confirm consent.';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    const subject = `Inquiry from ${form.name}` + (form.service ? ` — ${form.service}` : '');
    const lines = [
      `Name: ${form.name}`,
      `Email: ${form.email}`,
      form.phone ? `Phone: ${form.phone}` : null,
      form.service ? `Service of interest: ${form.service}` : null,
      form.appointment ? `Preferred appointment: ${form.appointment}` : null,
      '',
      'Message:',
      form.message
    ].filter(l => l !== null);
    const body = lines.join('\n');
    const href = `mailto:info@shifaservices.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    window.location.href = href;
    setSubmitted(true);
  };

  return (
    <div className="page">
      <PageHero
        eyebrow="Contact"
        title={<>Begin with a <em style={{ fontStyle: 'italic', color: 'var(--sage)' }}>conversation.</em></>}
        lede="A respectful and confidential starting point. Share a little about what you're looking for, and we will be in touch."
      />
      <section style={{ background: 'var(--cream)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 80 }} className="ct-grid">
            <Reveal>
              <h3 style={{ marginBottom: 24, fontSize: 'clamp(24px, 2.4vw, 32px)' }}>Reach the practice.</h3>
              <p style={{ color: '#5a5a52', marginBottom: 32 }}>
                Speak with our team by phone, email, or the form. Your information is treated with care and confidentiality.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>Email</div>
                  <a href="mailto:info@shifaservices.com" style={{ color: 'var(--forest-deep)', textDecoration: 'none', fontFamily: 'var(--serif)', fontSize: 22 }}>
                    info@shifaservices.com
                  </a>
                </div>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>Phone</div>
                  <a href="tel:4166484555" style={{ color: 'var(--forest-deep)', textDecoration: 'none', fontFamily: 'var(--serif)', fontSize: 22 }}>
                    (416) 648-4555
                  </a>
                </div>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>Service area</div>
                  <p style={{ color: '#5a5a52' }}>Greater Toronto Area, with virtual sessions across Ontario.</p>
                </div>
              </div>
              <div style={{ marginTop: 40, padding: 24, background: 'var(--ivory)', borderRadius: 12, display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <Icon name="lock" size={20} />
                <div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 16, marginBottom: 6, color: 'var(--forest-deep)' }}>Held with care</div>
                  <div style={{ fontSize: 13, color: '#5a5a52' }}>
                    Your information is treated with confidentiality and used only to respond to your request.
                  </div>
                </div>
              </div>
            </Reveal>
            <Reveal delay={120}>
              {submitted ? (
                <div style={{ background: 'var(--ivory)', padding: 56, borderRadius: 12, textAlign: 'center' }}>
                  <div style={{ width: 64, height: 64, borderRadius: 999, background: 'var(--forest)', color: 'var(--cream)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px' }}>
                    <Icon name="check" size={28} />
                  </div>
                  <h3 style={{ marginBottom: 16 }}>Your email is ready.</h3>
                  <p style={{ color: '#5a5a52', maxWidth: 420, margin: '0 auto 20px' }}>
                    We've opened your email client with a pre-filled message to <strong>info@shifaservices.com</strong>. Please review and send — we'll be in touch within one business day.
                  </p>
                  <p style={{ color: '#5a5a52', fontSize: 13, maxWidth: 420, margin: '0 auto' }}>
                    If nothing opened, you can email us directly at <a href="mailto:info@shifaservices.com" style={{ color: 'var(--sage)', textDecoration: 'underline' }}>info@shifaservices.com</a>.
                  </p>
                </div>
              ) : (
                <form onSubmit={submit} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }} className="form-grid">
                  <div className={`field ${errors.name ? 'error' : ''}`}>
                    <label>Full Name</label>
                    <input value={form.name} onChange={e => update('name', e.target.value)} placeholder="Your name" />
                    {errors.name && <span className="err">{errors.name}</span>}
                  </div>
                  <div className={`field ${errors.email ? 'error' : ''}`}>
                    <label>Email</label>
                    <input type="email" value={form.email} onChange={e => update('email', e.target.value)} placeholder="you@example.com" />
                    {errors.email && <span className="err">{errors.email}</span>}
                  </div>
                  <div className="field">
                    <label>Phone</label>
                    <input value={form.phone} onChange={e => update('phone', e.target.value)} placeholder="(optional)" />
                  </div>
                  <div className="field">
                    <label>Service Interest</label>
                    <select value={form.service} onChange={e => update('service', e.target.value)}>
                      <option value="">Select a service</option>
                      {SERVICES.map((s, i) => <option key={i} value={s.title}>{s.title}</option>)}
                    </select>
                  </div>
                  <div className="field" style={{ gridColumn: '1 / -1' }}>
                    <label>Preferred Appointment Type</label>
                    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 6 }}>
                      {['Virtual', 'In-person', 'Phone', 'No preference'].map(o => (
                        <button
                          key={o}
                          type="button"
                          onClick={() => update('appointment', o)}
                          style={{
                            padding: '10px 18px',
                            border: '1px solid var(--line)',
                            borderRadius: 999,
                            background: form.appointment === o ? 'var(--forest)' : 'transparent',
                            color: form.appointment === o ? 'var(--cream)' : 'var(--charcoal)',
                            fontSize: 13,
                            cursor: 'pointer',
                            fontFamily: 'var(--sans)',
                            transition: 'all .3s ease'
                          }}
                        >
                          {o}
                        </button>
                      ))}
                    </div>
                  </div>
                  <div className={`field ${errors.message ? 'error' : ''}`} style={{ gridColumn: '1 / -1' }}>
                    <label>Message</label>
                    <textarea rows={4} value={form.message} onChange={e => update('message', e.target.value)} placeholder="A short note about what you're looking for." />
                    {errors.message && <span className="err">{errors.message}</span>}
                  </div>
                  <div style={{ gridColumn: '1 / -1' }}>
                    <label style={{ display: 'flex', gap: 12, alignItems: 'flex-start', cursor: 'pointer' }}>
                      <input
                        type="checkbox"
                        checked={form.consent}
                        onChange={e => update('consent', e.target.checked)}
                        style={{ marginTop: 4, accentColor: 'var(--forest)' }}
                      />
                      <span style={{ fontSize: 13, color: '#5a5a52' }}>
                        I consent to Shifa Services contacting me using the information above. Your information is treated with care and confidentiality.
                      </span>
                    </label>
                    {errors.consent && <span className="err" style={{ marginTop: 6, display: 'block' }}>{errors.consent}</span>}
                  </div>
                  <div style={{ gridColumn: '1 / -1' }}>
                    <button type="submit" className="btn btn-primary">
                      Request Consultation <Icon name="arrow" size={16} />
                    </button>
                  </div>
                </form>
              )}
            </Reveal>
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) { .ct-grid { grid-template-columns: 1fr !important; gap: 48px !important; } .form-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>
    </div>
  );
};

/* ─────────────────────────────────────────────
   Page Hero & Final Band (shared)
   ───────────────────────────────────────────── */
const PageHero = ({ eyebrow, title, lede }) => (
  <section style={{ paddingTop: 180, paddingBottom: 80 }}>
    <div className="container">
      <Reveal>
        <div className="eyebrow" style={{ marginBottom: 28 }}>
          <span className="dot" />{eyebrow}
        </div>
        <h1 style={{ marginBottom: 28, maxWidth: 980 }}>{title}</h1>
        <p className="lede" style={{ maxWidth: 640 }}>{lede}</p>
      </Reveal>
    </div>
  </section>
);

const FinalBand = ({ onNavigate }) => (
  <section style={{ background: 'var(--sand)', padding: '100px 0' }}>
    <div className="container-narrow" style={{ textAlign: 'center' }}>
      <Reveal>
        <h2 style={{ marginBottom: 28, fontSize: 'clamp(36px, 4.4vw, 56px)' }}>
          Begin your <em style={{ fontStyle: 'italic', color: 'var(--sage)' }}>healing</em> journey.
        </h2>
        <p className="lede" style={{ maxWidth: 540, margin: '0 auto 36px' }}>
          A respectful, confidential starting point. We will be in touch within one business day.
        </p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="btn btn-primary" onClick={() => onNavigate('contact')}>
            Request Consultation <Icon name="arrow" size={16} />
          </button>
          <button className="btn btn-secondary" onClick={() => onNavigate('services')}>
            Explore Services
          </button>
        </div>
      </Reveal>
    </div>
  </section>
);

Object.assign(window, { AboutPage, ServicesPage, TeamPage, WorkshopsPage, FAQPage, ContactPage });