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

// ────────────────────────────────────────────────────────────
// Metadata
// ────────────────────────────────────────────────────────────
const title = "CIDR Calculator & Subnet Guide — IP Ranges, Masks & IPv6";
const description =
    "Free interactive CIDR calculator and comprehensive plain‑language guide covering subnetting, IP ranges, subnet masks and IPv6 addressing.";

// FAQ structured‑data (kept in sync with UI)
const faqJsonLd = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: faqs.map(({ q, a }) => ({
        "@type": "Question",
        name: q,
        acceptedAnswer: { "@type": "Answer", text: a },
    })),
};

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>

    <nav
        aria-label="Page sections"
        class="hidden sm:block sticky top-0 z-10 pt-1 my-6 border-0 sm:border border-gray-300 rounded-lg bg-white/70 shadow-md"
    >
        <div class="mx-auto max-w-4xl px-4">
            <ul
                class="flex flex-wrap justify-center gap-8 py-3 text-base font-medium text-gray-700"
            >
                <li>
                    <a
                        href="#what-is-cidr"
                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
                        >What is CIDR?</a
                    >
                </li>
                <li>
                    <a
                        href="#cidr-to-ip"
                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
                        >CIDR → IP range</a
                    >
                </li>
                <li>
                    <a
                        href="#subnetting-tutorial"
                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
                        >Subnetting tutorial</a
                    >
                </li>
                <li>
                    <a
                        href="#ipv6"
                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
                        >IPv6 basics</a
                    >
                </li>
                <li>
                    <a
                        href="#faq"
                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
                        >FAQ</a
                    >
                </li>
                <li>
                    <a
                        href="#resources"
                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
                        >Resources</a
                    >
                </li>
            </ul>
        </div>
    </nav>

    <Prose>
        <GuideContent />
    </Prose>

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