From 9af1854a7e35785a8e86426c4fb1edd465f164a3 Mon Sep 17 00:00:00 2001
From: Elizabeth Hunt <me@liz.coffee>
Date: Thu, 1 Jan 2026 18:32:49 -0800
Subject: Massive refactor courtesy of 5 dollars of AI tokens

---
 src/routes/approach/+page.svelte | 188 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 188 insertions(+)
 create mode 100644 src/routes/approach/+page.svelte

(limited to 'src/routes/approach/+page.svelte')

diff --git a/src/routes/approach/+page.svelte b/src/routes/approach/+page.svelte
new file mode 100644
index 0000000..75c9620
--- /dev/null
+++ b/src/routes/approach/+page.svelte
@@ -0,0 +1,188 @@
+<script>
+	import { slide } from 'svelte/transition';
+	import { approachImage } from '$lib/data/images';
+
+	const approaches = [
+		{
+			title: 'Cognitive Behavioral Therapy',
+			description:
+				'CBT focuses on modifying dysfunctional behaviors, thoughts, and emotions. In session, we will identify these harmful processes and determine if they are an accurate depiction of reality. If they are not, we will help you use strategies to challenge and overcome them.'
+		},
+		{
+			title: 'Solution Focused Therapy',
+			description:
+				"We believe the client is the expert of their own story. If you are coming to see us, it's possible that you're overwhelmed with your present situation. We will use the past to provide understanding and reflection, but we will mostly focus on the present and future. We will empower you to create new perspective, possibilities, and plans to actualize your new story."
+		},
+		{
+			title: 'Narrative Therapy',
+			description:
+				'Sometimes we become our problems. We start to identify as "a depressed person" or "an anxious person". We can help you learn to see your issues as something you have, but not something that defines you. We will teach you to put some distance between yourself and your issues and empower you to live your life so that you can work on finding out who you really are and what you are capable of.'
+		},
+		{
+			title: 'Emotion Focused Therapy',
+			description:
+				'We will work together as a team to find blocked vulnerabilities in your relationship. We will teach you to express your emotions to help you connect rather than disconnect. The goal is to create more trust and a secure bond with your partner.'
+		},
+		{
+			title: 'Gottman Method',
+			description:
+				"Gottman's research has shown that negativity impacts the brain and can draw couples apart. We will help you take the steps necessary to maintain a positive orientation towards one another during difficult circumstances. Therapy is most effective when both partners are present so that each person can share their history, story, and goals."
+		},
+		{
+			title: 'Family Systems Theory',
+			description:
+				'It is true that profound joy can come from living in a family, but conversely many psychological issues stem from dysfunctional relationships with one another. For example, when one person is struggling with anxiety, pornography addiction, any form of abuse, faith crisis, depression, or health issues it affects the whole family unit. Effective mediation can help in the toughest situations and facilitate respect and resolution.'
+		},
+		{
+			title: 'PPP - Positive Parenting Program',
+			description:
+				'We use this method to teach families how to treat and prevent behavioral and emotional problems in children and teens. We use a holistic approach and address concerns in the family, school, and community. We will not tell you how to parent, rather we will give you tools and ideas to manage misbehavior, set rules, encourage behavior you like, and take care of yourself so you can feel good and be confident in your parenting skills.'
+		}
+	];
+
+	let openIndex = -1;
+
+	function toggle(index) {
+		openIndex = openIndex === index ? -1 : index;
+	}
+</script>
+
+<div class="approach">
+	<h1 class="text-center">Our Approach.</h1>
+
+	<section class="card approach__intro">
+		<div class="approach__hero">
+			<img
+				class="shadow rounded"
+				src={approachImage}
+				alt="boats in water"
+				loading="lazy"
+				decoding="async"
+			/>
+		</div>
+		<p>
+			We meet each client where they are at and customize their therapeutic journey to best fit
+			their personality and issues. Some of the approaches we use most are listed below:
+		</p>
+	</section>
+
+	<ul class="approach__list">
+		{#each approaches as approach, i (approach.title)}
+			<li class="approach__item">
+				<button
+					class="approach__trigger"
+					type="button"
+					aria-expanded={openIndex === i}
+					on:click={() => toggle(i)}
+				>
+					<span class="approach__title">{approach.title}</span>
+					<span class="approach__icon" aria-hidden="true">
+						<i class={'bi ' + (openIndex === i ? 'bi-dash' : 'bi-plus')}></i>
+					</span>
+				</button>
+				{#if openIndex === i}
+					<div class="approach__content" transition:slide={{ duration: 200 }}>
+						<p>{approach.description}</p>
+					</div>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+</div>
+
+<style>
+	.approach {
+		display: grid;
+		gap: var(--space-5);
+	}
+
+	.approach__intro {
+		display: grid;
+		gap: var(--space-4);
+		text-align: center;
+	}
+
+	.approach__intro p {
+		max-width: 65ch;
+		margin-inline: auto;
+	}
+
+	.approach__hero img {
+		max-width: min(100%, 420px);
+		height: auto;
+	}
+
+	.approach__list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: grid;
+		gap: var(--space-3);
+	}
+
+	.approach__item {
+		background: var(--color-surface);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-sm);
+		overflow: hidden;
+	}
+
+	.approach__trigger {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-3);
+		padding: var(--space-4);
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		font: inherit;
+		text-align: left;
+		transition: background 150ms ease;
+	}
+
+	.approach__trigger:hover {
+		background: rgba(0, 0, 0, 0.02);
+	}
+
+	.approach__icon {
+		transition: transform 150ms ease;
+	}
+
+	.approach__trigger[aria-expanded='true'] .approach__icon {
+		transform: rotate(180deg);
+	}
+
+	.approach__title {
+		font-family: var(--font-serif);
+		font-size: 1.25rem;
+		font-weight: 600;
+	}
+
+	.approach__icon {
+		flex-shrink: 0;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		border-radius: 999px;
+		background: color-mix(in srgb, var(--color-accent) 12%, transparent);
+		color: var(--color-accent-strong);
+	}
+
+	.approach__icon i {
+		font-size: 1.1rem;
+	}
+
+	.approach__content {
+		padding: 0 var(--space-4) var(--space-4);
+	}
+
+	.approach__content p {
+		margin: 0;
+		color: var(--color-muted);
+		line-height: 1.6;
+	}
+</style>
-- 
cgit v1.2.3-70-g09d2