import AssistantDrawer from "@/components/AssistantDrawer";

export default function AssistantPage() {
  return (
    <div className="acve-page">
      <section className="acve-panel acve-section-base">
        <p className="acve-pill mb-3 w-fit">AI Assistant (Demo)</p>
        <h1 className="text-4xl font-semibold leading-tight text-[#222a38] md:text-5xl">Ask legal English questions in context</h1>
        <p className="mt-2 max-w-3xl text-base leading-relaxed text-slate-600 md:text-lg">
          This is a product preview. Responses are mock while backend retrieval and tutor logic are being integrated.
        </p>
      </section>

      <section className="grid gap-3 md:grid-cols-3">
        <article className="acve-panel p-4 text-sm text-slate-700">Use for clause terms, case-study guidance, and writing clarity tips.</article>
        <article className="acve-panel p-4 text-sm text-slate-700">For legal advice or final authority, always verify with qualified counsel.</article>
        <article className="acve-panel p-4 text-sm text-slate-700">Conversation persistence is placeholder-only in this MVP stage.</article>
      </section>

      <AssistantDrawer mode="page" />
    </div>
  );
}