const React = window.React;
const DS = window.CreativeTherapyZoneDesignSystem_30174f;
const { SectionHeader, ServiceCard, PullQuote, BioCard, Accordion, Badge, Card } = DS;
const { Palette, Chat, Clipboard, Heart, Sparkle, Arrow } = window.CTZIcons;

const wrap = { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" };

function Accessible() {
  const cols = [
    { t: "Adults", d: "From day-to-day stress and ADHD to depression, trauma, and life transitions — therapy that meets you exactly where you are." },
    { t: "Teens", d: "Teens don't always want to talk. That's okay. Art, digital expression, and creative making give feelings somewhere to go — and a place to just breathe." },
    { t: "Children", d: "Build confidence and emotional skills through play and making." },
  ];
  return (
    <section style={{ background: "var(--surface-brand-soft)", padding: "72px 0" }}>
      <div style={wrap}>
        <SectionHeader align="center" eyebrow="For everyone"
          title={<>Therapy for every age — and <em>no artistic skill required</em></>}
          intro="You don't need to know how to draw, paint, or “be creative.” This is therapy, not an art class — the making is simply a doorway; the healing happens in the process." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20, marginTop: 44 }}>
          {cols.map((c) => (
            <div key={c.t} style={{ textAlign: "center", padding: "0 12px" }}>
              <h3 style={{ fontFamily: "'Cormorant Garamond', var(--font-display)", fontWeight: 600, fontSize: 34, letterSpacing: ".005em", color: "var(--text-strong)", margin: "0 0 8px" }}>{c.t}</h3>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, lineHeight: 1.6, color: "var(--text-body)", margin: 0 }}>{c.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services() {
  return (
    <section id="services" style={{ background: "var(--surface-page)", padding: "var(--section-y) 0" }}>
      <div style={wrap}>
        <SectionHeader align="center" eyebrow="Ways to work together"
          title="Two modalities, one thoughtful approach"
          intro="We’ll find the blend that fits you — creative, conversational, or a little of both." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 22, marginTop: 48, alignItems: "stretch" }}>
          <ServiceCard tone="brand" icon={<Palette size={26} />} title="Art Therapy" linkLabel="Explore art therapy" href="#">
            Reach emotional, right-brain processing through making. From paint and clay to digital media, found materials, and everything in between — whatever feels right that day.
          </ServiceCard>
          <ServiceCard tone="coral" icon={<Chat size={26} />} title="Psychotherapy" linkLabel="Explore psychotherapy" href="#">
            Grounded, confidential talk therapy for teens and adults, held with warmth and professional care.
          </ServiceCard>
          <ServiceCard tone="gold" icon={<Clipboard size={26} />} title="IEP &amp; Assessment Review" linkLabel="Learn about reviews" href="#">
            A clear, supportive read of school IEPs and psycho-educational assessments to help families plan next steps.
          </ServiceCard>
        </div>
      </div>
    </section>
  );
}

function Approach() {
  return (
    <section style={{ background: "var(--surface-warm)", padding: "var(--section-y) 0" }}>
      <div style={{ ...wrap, maxWidth: 900 }}>
        <PullQuote align="center" cite="Rena Berktin, Art Psychotherapist">
          You don't need to be an artist to heal — just human. Art therapy isn't about perfection; when you step out of your head and trust the process, the rest unfolds naturally.
        </PullQuote>
      </div>
    </section>
  );
}

function About() {
  return (
    <section id="about" style={{ background: "var(--surface-page)", padding: "var(--section-y) 0" }}>
      <div style={wrap}>
        <SectionHeader eyebrow="Who you’ll work with"
          title={<>Meet <em>Rena Berktin</em></>}
          intro="A background in fine art, education, and psychotherapy — and a decade learning that everyone heals a little differently." />
        <div style={{ marginTop: 40 }}>
          <BioCard name="Rena Berktin" role="Art Psychotherapist · RP (Qualifying)" imageSrc={(window.__resources && window.__resources.renaImg) || "assets/rena.png"} initials="RB"
            credentials={[
              <Badge tone="brand" key="1" dot>Accepting new clients</Badge>,
              <Badge tone="outline" key="2">CRPO (Qualifying)</Badge>,
              <Badge tone="outline" key="3">CATA member</Badge>,
              <Badge tone="outline" key="4">OCT certified</Badge>,
            ]}>
            As a therapist, educator, and mother, I've learned that processing and healing look different for everyone—and often happen outside standard “talk therapy.” I bring fine-art training and clinical mental-health practice to our work, meeting you exactly where you are, whether we’re talking, making, or simply sitting together.
          </BioCard>
        </div>
      </div>
    </section>
  );
}

function Faq() {
  return (
    <section id="faq" style={{ background: "var(--surface-sunken)", padding: "var(--section-y) 0" }}>
      <div style={{ ...wrap, maxWidth: 860 }}>
        <SectionHeader align="center" eyebrow="What to expect"
          title="Before your first session"
          intro="A few things parents and clients often ask. Anything else — we’ll cover it together at intake." />
        <div style={{ marginTop: 40 }}>
          <Accordion defaultOpen={0} items={[
            { q: "Do I need any art experience?", a: "None at all. This is therapy, not an art class — there’s no wrong way to make anything, and the process matters far more than the product." },
            { q: "How does confidentiality work with my child?", a: "Sessions are a protected space for your child. We’ll reassure you with what you need to support them, while respecting their privacy. In-depth agreements about confidentiality are handled together at intake." },
            { q: "Are sessions virtual or in person?", a: "Both. Virtual sessions are available across Canada, and in-person sessions are offered in Thornhill. Evening and lunchtime appointments are available." },
            { q: "What happens in a free consultation?", a: "A relaxed 15-minute conversation — no pressure. We’ll talk about what brought you here and whether working together feels like the right fit." },
          ]} />
        </div>
      </div>
    </section>
  );
}

window.Accessible = Accessible;
window.Services = Services;
window.Approach = Approach;
window.About = About;
window.Faq = Faq;