// Services, About, Process

function Services({ onCTA }) {
  const cards = [
    {
      ico: "leaf-mind", title: "Anxiety & Panic",
      desc: "Generalised anxiety, panic attacks, phobias, and health anxiety — break the worry-avoidance cycle with practical CBT tools.",
      color: "var(--teal)", bg: "var(--teal-50)"
    },
    {
      ico: "hands", title: "Burnout & Stress",
      desc: "Work stress, overwhelm, and chronic exhaustion — rebuild capacity, reset boundaries, and find your way back to yourself.",
      color: "var(--coral)", bg: "var(--coral-50)"
    },
    {
      ico: "bloom", title: "Low Mood & Confidence",
      desc: "Depression, low self-esteem, and persistent self-criticism — develop a kinder inner voice and re-engage with what matters.",
      color: "#D9A800", bg: "var(--yellow-50)"
    },
    {
      ico: "compass", title: "OCD, Trauma & Sleep",
      desc: "OCD, PTSD, perfectionism, and sleep problems — structured, evidence-based protocols tailored to your story and pace.",
      color: "var(--purple)", bg: "var(--purple-50)"
    },
  ];
  return (
    <section id="services" className="s-pad" data-screen-label="03 Services">
      <SparkleDoodle style={{ top: 60, right: "10%" }}/>
      <div className="wrap-wide">
        <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", gap: 32, flexWrap: "wrap", marginBottom: 48 }}>
          <div>
            <span className="eyebrow">What CBT Can Help With</span>
            <h2 className="h-section" style={{ marginTop: 16, maxWidth: 720 }}>
              Cognitive Behavioural Therapy for <span className="script">real-life</span> challenges
              <HeartDoodle style={{ position: "relative", display: "inline-block", marginLeft: 10, transform: "rotate(-12deg)" }}/>
            </h2>
          </div>
          <p className="lede" style={{ maxWidth: 380, marginBottom: 8 }}>
            CBT is one of the most researched and effective talking therapies. Each session is shaped around your story — never a script.
          </p>
        </div>

        <div className="svc-grid">
          {cards.map((c, i) => (
            <article key={c.title} className="svc-card" style={{ "--svc-color": c.color, "--svc-bg": c.bg }}>
              <div className="svc-ico"><Icon name={c.ico} size={30} stroke={1.6}/></div>
              <h3>{c.title}</h3>
              <p>{c.desc}</p>
              <a href="#booking" onClick={(e) => { e.preventDefault(); onCTA("booking"); }} className="svc-more">
                Learn More <Icon name="arrow-right" size={12}/>
              </a>
            </article>
          ))}
        </div>

        {/* full specialty list */}
        <div style={{
          marginTop: 40, padding: "26px 32px", borderRadius: "var(--radius)",
          background: "linear-gradient(95deg, var(--cream-2), #fff)",
          border: "1px solid var(--line)",
          display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap",
        }}>
          <span style={{ fontSize: 13, fontWeight: 800, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--purple-deep)" }}>
            Also helps with
          </span>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {[
              "Generalised anxiety", "Panic attacks", "Specific phobias",
              "Health anxiety", "OCD", "PTSD",
              "Perfectionism", "Sleep problems", "Low confidence",
              "Long-term health conditions",
            ].map(s => (
              <span key={s} style={{
                padding: "8px 14px", borderRadius: 999,
                background: "#fff", border: "1px solid var(--line)",
                fontSize: 13, fontWeight: 600, color: "var(--ink-soft)",
              }}>{s}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function About() {
  const creds = [
    "BABCP-Accredited CBT Therapist",
    "MSc CBT — Postgraduate trained",
    "English & Cantonese (粵語)",
    "10+ Years Clinical Experience",
  ];
  return (
    <section id="about" className="s-pad" style={{ background: "linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%)" }} data-screen-label="04 About">
      <div className="blob blob-purple" style={{ width: 320, height: 320, top: 80, right: -100, opacity: .35 }}/>
      <div className="blob blob-coral" style={{ width: 260, height: 260, bottom: 40, left: -120, opacity: .3 }}/>

      <div className="wrap-wide" style={{ position: "relative", zIndex: 2 }}>
        <div className="about-grid">
          <div className="about-media">
            <div className="about-photo">
              <image-slot
                id="about-portrait"
                shape="rounded"
                radius="44"
                src="assets/dr-hartwell.png"
                placeholder="Drop your portrait"
              ></image-slot>
            </div>

            <div className="about-tag float" style={{ top: 32, left: -24 }}>
              <span className="dot" style={{ background: "var(--teal)" }}></span>
              Accepting new clients
            </div>
            <div className="about-tag float-2" style={{ bottom: 64, right: -16 }}>
              <Icon name="heart" size={14} className="" />
              <span style={{ marginLeft: 2 }}>English &amp; Cantonese</span>
            </div>
            <div className="card float" style={{
              position: "absolute", bottom: -28, left: 24, padding: "16px 20px",
              display: "flex", alignItems: "center", gap: 14, borderRadius: 18, maxWidth: 240,
            }}>
              <div style={{ display: "flex", gap: 2, color: "var(--yellow)" }}>
                {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={14}/>)}
              </div>
              <div style={{ fontSize: 12.5, fontWeight: 700, lineHeight: 1.3 }}>
                "Dr. Hartwell changed how I see myself."
                <div style={{ fontWeight: 600, color: "var(--ink-mute)", marginTop: 2 }}>— Mara K.</div>
              </div>
            </div>
          </div>

          <div>
            <span className="eyebrow">About Dr. Hartwell</span>
            <h2 className="h-section" style={{ marginTop: 16 }}>
              Hi, I'm <span className="script">Dr. Amelia Hartwell</span>
              <SparkleDoodle style={{ position: "relative", display: "inline-block", marginLeft: 8 }}/>
            </h2>
            <p className="lede" style={{ marginTop: 20 }}>
              I'm a BABCP-accredited Cognitive Behavioural Therapist and founder of Lumina Mind Studio in Kensington, London. I work with adults navigating anxiety, burnout, low mood, OCD, trauma, and the patterns that quietly get in their way.
            </p>
            <p className="lede" style={{ marginTop: 16 }}>
              CBT is structured, collaborative, and grounded in decades of research — but the heart of my work is simple: a space where you feel genuinely seen, never judged, and gently challenged to grow. I see clients in English and Cantonese.
            </p>

            <div className="about-creds">
              {creds.map(c => (
                <span key={c} className="about-cred">
                  <Icon name="check" size={14}/>
                  {c}
                </span>
              ))}
            </div>

            <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
              <button className="btn btn-teal">
                Read My Approach
                <span className="btn-icon-r" style={{ background: "rgba(255,255,255,.22)" }}>
                  <Icon name="arrow-right" size={14}/>
                </span>
              </button>
              <span style={{ fontFamily: "var(--ff-script)", fontSize: 22, color: "var(--purple-deep)" }}>
                — looking forward to meeting you
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    { n: 1, ico: "calendar", title: "Free 15-min Intro Call",
      desc: "Book a complimentary intro call. We'll chat briefly so you can decide if I'm the right fit — no commitment, no awkwardness.",
      color: "var(--coral)", bg: "var(--coral-50)" },
    { n: 2, ico: "user-heart", title: "Assessment Session",
      desc: "We meet — online or at the Kensington studio — and map out what's going on, where you'd like to be, and how CBT can get you there.",
      color: "var(--teal)", bg: "var(--teal-50)" },
    { n: 3, ico: "bloom", title: "Weekly CBT Sessions",
      desc: "Structured 50-minute sessions with real tools, gentle homework, and steady progress — typically 8 to 20 sessions, at your pace.",
      color: "var(--purple)", bg: "var(--purple-50)" },
  ];
  return (
    <section id="process" className="process s-pad" data-screen-label="05 How It Works">
      <SwirlDoodle style={{ top: 60, right: "12%" }} color="var(--coral)"/>
      <div className="wrap-wide">
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <span className="eyebrow eyebrow-c" style={{ justifyContent: "center" }}>How It Works</span>
          <h2 className="h-section" style={{ marginTop: 16 }}>
            Three steps to <span className="script">feeling lighter</span>
          </h2>
          <p className="lede" style={{ margin: "16px auto 0" }}>
            Starting therapy can feel like a lot. Here's exactly what it looks like to begin with me — gentle, simple, no surprises.
          </p>
        </div>

        <div className="process-grid">
          <div className="process-line"></div>
          {steps.map(s => (
            <div key={s.n} className="step-card" style={{ "--step-color": s.color, "--step-bg": s.bg }}>
              <div className="step-num">{String(s.n).padStart(2, "0")}</div>
              <div className="step-ico"><Icon name={s.ico} size={28}/></div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services, About, Process });