import type { Metadata } from "next";
import Link from "next/link";

export const metadata: Metadata = {
  title: "Contact",
  description: "Contact the owner of Image Converter for support, bug reports, or partnerships."
};

export default function ContactPage() {
  return (
    <main className="relative z-10 min-h-screen px-4 py-10 sm:px-6">
      <div className="mx-auto w-full max-w-3xl">
        <Link
          className="text-sm font-semibold text-indigo-700 underline decoration-indigo-200 underline-offset-4 hover:text-indigo-900 hover:decoration-indigo-400"
          href="/"
        >
          ← Back to converter
        </Link>

        <div className="glass-panel mt-6 rounded-3xl p-6 sm:p-8">
          <h1 className="font-display text-3xl font-extrabold tracking-tight text-slate-900">Contact</h1>
          <p className="mt-3 text-sm leading-relaxed text-slate-600">
            To keep this site lightweight, the contact method is intentionally simple. Before launching publicly, replace
            the placeholder below with a real email address or a support form endpoint.
          </p>

          <div className="mt-6 grid gap-4 sm:grid-cols-2">
            <div className="rounded-2xl border border-white/60 bg-white/55 p-5 backdrop-blur">
              <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Email</p>
              <p className="mt-2 text-sm font-semibold text-slate-900">you@example.com</p>
              <p className="mt-1 text-xs text-slate-600">
                Add your real support email here for AdSense / trust signals.
              </p>
            </div>
            <div className="rounded-2xl border border-white/60 bg-white/55 p-5 backdrop-blur">
              <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">What to include</p>
              <ul className="mt-2 list-disc pl-4 text-sm text-slate-700">
                <li>Which image you tried to convert (format: jpg/png/webp/avif)</li>
                <li>Output preset you selected</li>
                <li>Any error message shown</li>
              </ul>
            </div>
          </div>

          <div className="prose prose-slate mt-6 max-w-none">
            <h2>Support</h2>
            <p>
              If you’re reporting an issue, mention what you tried to convert (for example: convert WebP to JPG, PNG to
              WebP, JPG to AVIF) and whether you were compressing or resizing the image.
            </p>
          </div>
        </div>
      </div>
    </main>
  );
}