---
import Layout from "../layouts/Layout.astro";
import Cidr from "../components/Cidr";
import { faqs } from "../content/faqs.ts";

const title = "Interactive visual CIDR and IP range calculator";
const description =
	"Instantly compute and visualize CIDR subnets, IP ranges and masks. Free online tool for accurate network design, planning and IT education.";

const faqJsonLd = {
	"@context": "https://schema.org",
	"@type": "FAQPage",
	mainEntity: faqs.map(({ q, a }) => ({
		"@type": "Question",
		name: q,
		acceptedAnswer: { "@type": "Answer", text: a },
	})),
};
---

<Layout title={title} description={description}>
	<header>
		<div class="mx-auto max-w-7xl px-4 py-2 sm:py-4 lg:px-6 text-center">
			<h1
				class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-6xl"
			>
				CIDR Calculator
			</h1>
			<p class="mt-4 text-lg sm:text-xl max-w-2xl mx-auto text-gray-700">
				Visualize and Calculate Network Ranges with IPv4 CIDR Blocks
			</p>
		</div>
	</header>

	<Cidr client:load />

	<section id="faq-section" class="mx-auto mt-12 max-w-3xl px-4 sm:px-0">
		<h2 id="faq" class="mb-4 text-2xl font-bold">CIDR & Subnetting FAQ</h2>

		<dl class="space-y-2">
			{
				faqs.map(({ q, a }) => (
					<details class="group rounded-lg bg-white shadow-sm open:shadow-md transition">
						<summary
							class="flex cursor-pointer list-none items-center justify-between
						 rounded-lg px-4 py-3 font-semibold text-gray-900
						 hover:bg-gray-50"
						>
							{q}
							<svg
								class="h-5 w-5 transform text-gray-400 transition group-open:rotate-180"
								xmlns="http://www.w3.org/2000/svg"
								fill="none"
								viewBox="0 0 24 24"
								stroke="currentColor"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M19 9l-7 7-7-7"
								/>
							</svg>
						</summary>
						<dd class="px-4 pb-4 pt-1 text-gray-700">{a}</dd>
					</details>
				))
			}
		</dl>
	</section>

	<script
		type="application/ld+json"
		is:inline
		set:html={JSON.stringify(faqJsonLd, null, 2)}
	/>
</Layout>