"use client";

import { CircleHelp, Mail, ShieldAlert } from "lucide-react";

import { useLocale } from "@/components/providers/locale-provider";

export function HelpClient() {
  const { dict } = useLocale();

  return (
    <section className="grid gap-6 xl:grid-cols-[1.05fr_0.95fr]">
      <article className="ops-card p-6">
        <div className="flex items-start gap-3">
          <div className="rounded-lg bg-moss/10 p-3 text-moss">
            <CircleHelp className="h-5 w-5" />
          </div>
          <div>
            <p className="ops-title">{dict.help.title}</p>
            <p className="mt-2 text-[14px] leading-7 text-slate-600">{dict.help.description}</p>
          </div>
        </div>

        <div className="mt-8 grid gap-4 md:grid-cols-2">
          {dict.help.cards.map((card) => (
            <div key={card.title} className="rounded border border-line/70 bg-slate-50 p-4">
              <p className="text-sm font-semibold text-ink">{card.title}</p>
              <p className="mt-2 text-[13px] leading-6 text-slate-600">{card.copy}</p>
            </div>
          ))}
        </div>
      </article>

      <article className="ops-card p-6">
        <div className="flex items-start gap-3">
          <div className="rounded-lg bg-moss/10 p-3 text-moss">
            <Mail className="h-5 w-5" />
          </div>
          <div>
            <p className="ops-title">{dict.help.contactTitle}</p>
            <p className="mt-2 text-[14px] leading-7 text-slate-600">{dict.help.contactCopy}</p>
          </div>
        </div>

        <div className="mt-6 rounded border border-line/70 bg-slate-50 p-4">
          <p className="text-sm font-semibold text-ink">{dict.help.contactLabel}</p>
          <p className="mt-2 text-[14px] font-medium text-moss">
            Gunakan form Hubungi Admin di halaman login.
          </p>
        </div>

        <div className="mt-4 rounded border border-amber-200 bg-amber-50 p-4">
          <div className="flex items-start gap-3">
            <ShieldAlert className="mt-0.5 h-5 w-5 text-amber-600" />
            <p className="text-[13px] leading-6 text-amber-900">{dict.help.securityNote}</p>
          </div>
        </div>
      </article>
    </section>
  );
}
