'use client'

import { FileTextIcon, LinkIcon } from 'lucide-react'

export function VerificationSection() {
    return (
        <section id="verification" className="flex flex-col gap-8">
            <h2 className="font-display font-semibold text-3xl sm:text-4xl leading-tight tracking-tighter text-base-content">
                Verification
            </h2>

            <p className="text-base sm:text-xl leading-snug tracking-tight text-muted">
                <span className="font-medium text-base-content">Standard.site</span>{ ' ' }
                records point to domain names and webpages. We need a way for those to point
                back to the record. This is done through a .well-known route for publications
                and HTML link tags for documents.
            </p>

            <div className="flex flex-col gap-4">
                {/* Publication */}
                <div className="flex flex-col gap-4 rounded-2xl border border-border bg-base-200 p-4">
                    <div className="flex items-center gap-3">
                        <LinkIcon className="size-4 text-base-content" />
                        <h3 className="font-display font-semibold text-xl leading-tight tracking-tight text-base-content">
                            Publication
                        </h3>
                    </div>

                    <p className="text-base leading-snug tracking-tight text-muted">
                        Add a /.well-known/site.standard.publication endpoint to your domain.
                        The response should be the AT-URI of your publication record.
                    </p>

                    <p className="text-sm leading-snug tracking-tight text-muted">
                        This confirms the link between the publication and the domain.
                    </p>

                    <div className="flex flex-col gap-2">
                        <div className="flex flex-col gap-1">
                            <span className="text-xs font-medium uppercase tracking-wider text-muted">
                                Request
                            </span>
                            <pre className="overflow-x-auto rounded-lg border border-border bg-card p-3">
                                <code className="font-mono text-sm leading-relaxed text-base-content">
                                    https://standard.site/.well-known/site.standard.publication
                                </code>
                            </pre>
                        </div>
                        <div className="flex flex-col gap-1">
                            <span className="text-xs font-medium uppercase tracking-wider text-muted">
                                Response
                            </span>
                            <pre className="overflow-x-auto rounded-lg border border-border bg-card p-3">
                                <code className="font-mono text-sm leading-relaxed text-base-content">
                                    at://did:plc:abc123/site.standard.publication/rkey
                                </code>
                            </pre>
                        </div>
                    </div>
                </div>

                {/* Document */}
                <div className="flex flex-col gap-4 rounded-2xl border border-border bg-base-200 p-4">
                    <div className="flex items-center gap-3">
                        <FileTextIcon className="size-4 text-base-content" />
                        <h3 className="font-display font-semibold text-xl leading-tight tracking-tight text-base-content">
                            Document
                        </h3>
                    </div>

                    <p className="text-base leading-snug tracking-tight text-muted">
                        Add a &lt;link&gt; tag in the document&apos;s &lt;head&gt; that references its AT-URI.
                    </p>

                    <div className="flex flex-col gap-1">
                        <span className="text-xs font-medium uppercase tracking-wider text-muted">
                            HTML
                        </span>
                        <pre className="overflow-x-auto rounded-lg border border-border bg-card p-3">
                            <code className="font-mono text-sm leading-relaxed text-base-content">
                                &lt;link rel=&quot;site.standard.document&quot; href=&quot;at://did:plc:xyz789/site.standard.document/rkey&quot;&gt;
                            </code>
                        </pre>
                    </div>
                </div>
            </div>
        </section>
    )
}
