chatrpg-app/src/routes/Faq.svelte

<script>
	// Self-contained FAQ state and logic
	let openFaq = $state(null);

	const faqs = [
		{
			q: "How does the LLM actually run the game?",
			a: "You describe your character, the setting, genre, tone, and any special rules in plain English. The LLM then generates the opening scene and continues the story based on everything said so far. It maintains consistency, tracks important details, and reacts to your every input naturally."
		},
		{
			q: "Is there a limit to what I can do or say?",
			a: "The only real limits are the creativity of the model and basic content guidelines. You can try anything — fight, seduce, build, explore, betray, invent magic systems on the fly. Outcomes depend on context, your skills, luck, and the world's rules as established."
		},
		{
			q: "How much does it cost in practice?",
			a: "At $1 per million tokens, a rich hour of play typically uses 15,000–40,000 tokens depending on length and model. That’s usually 3–8 cents per hour. Long epic campaigns cost only a few dollars total. You are charged only for actual usage — no subscriptions or hidden fees."
		},
		{
			q: "Can I play the same character/world across multiple sessions?",
			a: "Yes. Your adventures are saved with full history and context. Resume anytime and the LLM will remember every decision, character, location, and plot thread. You can also branch into alternate timelines if you want."
		},
		{
			q: "When will ChatRPG be available?",
			a: "We are currently in active development and polishing the core experience. A full launch is coming soon."
		}
	];

	function toggleFaq(index) {
		openFaq = openFaq === index ? null : index;
	}
</script>

<section id="faq" class="section section-alt">
	<div class="container">
		<div class="section-header">
			<div class="eyebrow">QUESTIONS</div>
			<h2>Frequently Asked Questions</h2>
		</div>

		<div class="faq-list">
			{#each faqs as faq, i}
				<div class="faq-item" class:open={openFaq === i}>
					<button class="faq-question" onclick={() => toggleFaq(i)}>
						<span>{faq.q}</span>
						<span class="faq-arrow">{openFaq === i ? '−' : '+'}</span>
					</button>
					{#if openFaq === i}
						<div class="faq-answer">{faq.a}</div>
					{/if}
				</div>
			{/each}
		</div>
	</div>
</section>

<style>
	/* FAQ specific */
	.faq-list {
		max-width: 780px;
		margin: 0 auto;
	}
	.faq-item {
		border-bottom: 1px solid #2a2a35;
	}
	.faq-item:last-child {
		border-bottom: none;
	}
	.faq-question {
		width: 100%;
		background: none;
		border: none;
		color: #e5e5ea;
		font-size: 1.05rem;
		text-align: left;
		padding: 20px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		font-weight: 500;
	}
	.faq-arrow {
		font-size: 1.4rem;
		line-height: 1;
		color: #777;
		width: 24px;
		text-align: center;
	}
	.faq-answer {
		color: #a1a1aa;
		padding-bottom: 22px;
		padding-right: 30px;
		font-size: 1rem;
		line-height: 1.65;
	}
</style>