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

const title = "CIDR Calculator Widget Embed Example";
const description =
	"Copy-paste our lightweight iframe to embed the CIDR & subnet calculator on your site in seconds—responsive, free, and auto-updated with every new release.";

// Embed code that users can copy
const embedCode = `<iframe src="https://cidr.xyz/embed" width="100%" height="600" title="CIDR Calculator" loading="lazy"></iframe>`;
---

<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 Widget
			</h1>
			<p class="mt-4 text-lg sm:text-xl max-w-2xl mx-auto text-gray-700">
				Embed the CIDR Calculator in your website
			</p>
		</div>
	</header>

	<div class="prose max-w-none mb-8">
		<p>
			You can embed the CIDR calculator widget in your website or
			application using an iframe. Copy the code below and adjust the
			width and height as needed:
		</p>

		<pre
			class="p-4 rounded-md overflow-x-auto bg-gray-800 flex justify-center"><code class="text-gray-300 whitespace-pre-wrap">{embedCode}</code></pre>

		<h3>Live Example</h3>
	</div>

	<div class="mb-8">
		<iframe
			src="/embed"
			width="100%"
			height="600"
			title="CIDR Calculator"
			loading="lazy"></iframe>
	</div>

	<div class="prose max-w-none">
		<h3>Customization</h3>
		<p>
			The widget adapts to the width of its container. For best results:
		</p>
		<ul>
			<li>Use a minimum width of 400px for optimal display</li>
			<li>Set a minimum height of 600px to avoid scrolling</li>
			<li>
				The widget has a transparent background that can blend with your
				site
			</li>
		</ul>

		<h3>Usage Notes</h3>
		<ul>
			<li>The widget is free to use on any website</li>
			<li>
				Please consider adding attribution with a link back to <a
					href="https://cidr.xyz"
					class="text-blue-600 hover:underline">cidr.xyz</a
				>
			</li>
			<li>
				For any questions or customization needs, visit the <a
					href="https://github.com/yuvadm/cidr.xyz"
					class="text-blue-600 hover:underline">GitHub repository</a
				>
			</li>
		</ul>
	</div>
</Layout>