---
interface Props {
	node: {
		headline?: string;
		testimonials: Array<{
			quote: string;
			author: string;
			role?: string;
			company?: string;
			avatar?: string;
		}>;
	};
}

const { node } = Astro.props;
const { headline, testimonials } = node;
---

<section class="testimonials section">
	<div class="container">
		{headline && (
			<header class="testimonials-header">
				<h2 class="testimonials-headline">{headline}</h2>
			</header>
		)}
		<div class="testimonials-grid">
			{testimonials.map((testimonial) => (
				<div class="testimonial-card">
					<blockquote class="testimonial-quote">
						"{testimonial.quote}"
					</blockquote>
					<div class="testimonial-author">
						{testimonial.avatar && (
							<img
								src={testimonial.avatar}
								alt={testimonial.author}
								class="testimonial-avatar"
								loading="lazy"
							/>
						)}
						<div class="testimonial-info">
							<span class="testimonial-name">{testimonial.author}</span>
							{(testimonial.role || testimonial.company) && (
								<span class="testimonial-role">
									{testimonial.role}
									{testimonial.role && testimonial.company && " at "}
									{testimonial.company}
								</span>
							)}
						</div>
					</div>
				</div>
			))}
		</div>
	</div>
</section>

<style>
	.testimonials {
		background: var(--color-surface);
	}

	.testimonials-header {
		text-align: center;
		margin-bottom: var(--spacing-4xl);
	}

	.testimonials-headline {
		font-size: var(--font-size-3xl);
		font-weight: 800;
	}

	.testimonials-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--spacing-xl);
	}

	.testimonial-card {
		padding: var(--spacing-xl);
		background: var(--color-bg);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		display: flex;
		flex-direction: column;
		gap: var(--spacing-lg);
	}

	.testimonial-quote {
		font-size: var(--font-size-lg);
		line-height: 1.6;
		color: var(--color-text);
		flex: 1;
	}

	.testimonial-author {
		display: flex;
		align-items: center;
		gap: var(--spacing-md);
	}

	.testimonial-avatar {
		width: 48px;
		height: 48px;
		border-radius: var(--radius-full);
		object-fit: cover;
	}

	.testimonial-info {
		display: flex;
		flex-direction: column;
	}

	.testimonial-name {
		font-weight: 600;
		font-size: var(--font-size-sm);
	}

	.testimonial-role {
		font-size: var(--font-size-xs);
		color: var(--color-muted);
	}

	@media (max-width: 900px) {
		.testimonials-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 600px) {
		.testimonials-grid {
			grid-template-columns: 1fr;
		}
	}
</style>
