---
import Layout from "../layouts/Layout.astro";
import Cidr from "../components/Cidr";

const title = "Subnet Guide — IP Ranges and Masks";
const description =
    "Free interactive CIDR calculator and comprehensive guide covering subnetting, IP ranges, subnet masks and addressing.";

import { Content as GuideContent } from "../content/cidr-guide.md";
---

<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 Subnet Guide
            </h1>
            <p class="mt-4 text-lg sm:text-xl max-w-2xl mx-auto text-gray-700">
                Convert CIDR blocks to IP ranges and master subnetting for IPv4
                — in one streamlined resource.
            </p>
        </div>
    </header>

    <section class="hidden sm:block">
        <Cidr client:load />
    </section>

    <article class="prose prose-lg mx-auto">
        <GuideContent />
    </article>
</Layout>