@page
@{
    ViewData["Title"] = "Installation Guide";
}

<!-- Hero -->
<section class="relative overflow-hidden border-b border-slate-200/60">
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_20%_30%,rgba(8,145,178,0.12),transparent_24rem),radial-gradient(circle_at_80%_20%,rgba(251,191,36,0.10),transparent_20rem)]"></div>
    <div class="relative mx-auto w-full max-w-screen-2xl px-4 py-16 text-center sm:px-6 lg:px-8 lg:py-24">
        <span class="inline-flex items-center gap-2 rounded-full border border-cyan-200 bg-cyan-50 px-4 py-1.5 text-sm font-semibold text-cyan-800">
            Detailed setup guide
        </span>
        <h1 class="mx-auto mt-6 max-w-4xl font-['Sora'] text-4xl font-bold tracking-tight text-slate-950 sm:text-5xl">
            Installation
        </h1>
        <p class="mx-auto mt-6 max-w-3xl text-lg leading-relaxed text-slate-600">
            Complete installation instructions for the RichTextBox ASP.NET Core package, including NuGet setup, Program.cs configuration, license file placement, and upload endpoint mapping.
        </p>
    </div>
</section>

<section class="border-b border-slate-200/60">
    <div class="mx-auto w-full max-w-screen-2xl px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
        <div class="mx-auto max-w-4xl space-y-8">

            <!-- NuGet Install -->
            <div class="rounded-2xl border border-slate-200 bg-white/90 p-8 shadow-sm">
                <p class="font-['Sora'] text-sm font-semibold uppercase tracking-[0.2em] text-cyan-700">Step 1</p>
                <h2 class="mt-3 font-['Sora'] text-2xl font-bold text-slate-950">Install the NuGet Package</h2>
                <p class="mt-4 text-base leading-7 text-slate-600">Install via the .NET CLI:</p>
                <div class="code-panel"><pre><code>dotnet add package RichTextBox</code></pre></div>
                <p class="mt-4 text-base leading-7 text-slate-600">Or via the Visual Studio Package Manager Console:</p>
                <div class="code-panel"><pre><code>Install-Package RichTextBox</code></pre></div>
                <p class="mt-4 text-base leading-7 text-slate-600">Or add directly to your <code>.csproj</code>:</p>
                <div class="code-panel"><pre><code>&lt;PackageReference Include="RichTextBox" Version="1.0.0-preview.1" /&gt;</code></pre></div>
            </div>

            <!-- Program.cs -->
            <div class="rounded-2xl border border-slate-200 bg-white/90 p-8 shadow-sm">
                <p class="font-['Sora'] text-sm font-semibold uppercase tracking-[0.2em] text-cyan-700">Step 2</p>
                <h2 class="mt-3 font-['Sora'] text-2xl font-bold text-slate-950">Configure Program.cs</h2>
                <p class="mt-4 text-base leading-7 text-slate-600">Register the RichTextBox services and map the upload endpoints. You can customize the upload path, allowed extensions, and maximum file size.</p>
                <div class="code-panel"><pre><code>var builder = WebApplication.CreateBuilder(args);

// Register RichTextBox services with default options
builder.Services.AddRichTextBox();

// Or with custom options:
builder.Services.AddRichTextBox(options =&gt;
{
    options.UploadWebPath = "/uploads";
    options.MaxUploadBytes = 4 * 1024 * 1024; // 4 MB
    options.AllowedImageExtensions = new[] { ".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg" };
    options.AllowedFileExtensions = new[] { ".zip", ".pdf", ".doc", ".docx" };
});

var app = builder.Build();
app.UseStaticFiles();

// Map upload and gallery endpoints
app.MapRichTextBoxUploads();

app.MapRazorPages();
app.Run();</code></pre></div>
            </div>

            <!-- Tag Helper Import -->
            <div class="rounded-2xl border border-slate-200 bg-white/90 p-8 shadow-sm">
                <p class="font-['Sora'] text-sm font-semibold uppercase tracking-[0.2em] text-cyan-700">Step 3</p>
                <h2 class="mt-3 font-['Sora'] text-2xl font-bold text-slate-950">Register the Tag Helper</h2>
                <p class="mt-4 text-base leading-7 text-slate-600">Add the RichTextBox Tag Helper to your <code>Pages/_ViewImports.cshtml</code>:</p>
                <div class="code-panel"><pre><code>@@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@@addTagHelper *, RichTextBox</code></pre></div>
            </div>

            <!-- License File -->
            <div class="overflow-hidden rounded-2xl border border-slate-200 bg-[linear-gradient(135deg,#0f172a,#155e75)] p-8 text-white shadow-panel">
                <p class="font-['Sora'] text-sm font-semibold uppercase tracking-[0.2em] text-cyan-300">Step 4</p>
                <h2 class="mt-3 font-['Sora'] text-2xl font-bold">Place the License File</h2>
                <p class="mt-4 text-base leading-8 text-cyan-100/80">
                    The package validates a license file before rendering editors or accepting uploads. Place <code>RichTextBox.lic</code> in your project's content root directory (the same folder that contains <code>Program.cs</code>).
                </p>
                <div class="mt-4 rounded-xl border border-white/10 bg-white/5 p-5">
                    <p class="font-['Sora'] text-sm font-semibold text-cyan-300">License file location</p>
                    <pre class="mt-3 text-sm leading-7 text-cyan-100/80"><code>YourProject/
  Program.cs
  RichTextBox.lic         &lt;-- content root
  appsettings.json
  Pages/
    _ViewImports.cshtml
    Index.cshtml
  wwwroot/
    uploads/              &lt;-- image upload target</code></pre>
                </div>
                <div class="mt-4 rounded-xl border border-white/10 bg-white/5 p-5">
                    <p class="font-['Sora'] text-sm font-semibold text-cyan-300">License file format</p>
                    <pre class="mt-3 text-sm leading-7 text-cyan-100/80"><code>RichTextBox License
License Number: 30076785
Licensed to: Your Company Name</code></pre>
                </div>
                <p class="mt-4 text-sm text-cyan-100/80">The trial download (<code>richtextbox.zip</code>) includes a pre-configured license file so you can evaluate immediately.</p>
            </div>

            <!-- Upload Directory -->
            <div class="rounded-2xl border border-slate-200 bg-white/90 p-8 shadow-sm">
                <p class="font-['Sora'] text-sm font-semibold uppercase tracking-[0.2em] text-cyan-700">Step 5</p>
                <h2 class="mt-3 font-['Sora'] text-2xl font-bold text-slate-950">Create the Upload Directory</h2>
                <p class="mt-4 text-base leading-7 text-slate-600">Create a <code>wwwroot/uploads</code> folder for image uploads. The gallery endpoint will browse and upload images into this directory.</p>
                <div class="code-panel"><pre><code>mkdir wwwroot/uploads</code></pre></div>
                <p class="mt-4 text-base leading-7 text-slate-600">On deployed servers, ensure the application pool identity has write access to this folder.</p>
            </div>

            <!-- Verify -->
            <div class="rounded-2xl border border-slate-200 bg-white/90 p-8 shadow-sm">
                <p class="font-['Sora'] text-sm font-semibold uppercase tracking-[0.2em] text-cyan-700">Step 6</p>
                <h2 class="mt-3 font-['Sora'] text-2xl font-bold text-slate-950">Verify the Installation</h2>
                <p class="mt-4 text-base leading-7 text-slate-600">Add a simple editor to any page and run your application:</p>
                <div class="code-panel"><pre><code>&lt;richtextbox name="Body" toolbar="default" height="300px" /&gt;</code></pre></div>
                <p class="mt-4 text-base leading-7 text-slate-600">If the editor renders with a toolbar, your installation is complete. If you see a license error, verify that <code>RichTextBox.lic</code> is in the content root and the license number matches.</p>
            </div>

        </div>
    </div>
</section>
