import { Rocket } from "lucide-react";
import {
  DocArticle,
  DocSection,
  DocSteps,
  DocStep,
  DocCallout,
  DocNext,
} from "@/components/support/doc-article";

export const metadata = {
  title: "Getting Started — Echo Help",
};

export default function GettingStartedPage() {
  return (
    <DocArticle
      title="Getting Started"
      description="Go from signup to your first processed response card in about 10 minutes."
      icon={<Rocket className="size-[18px]" />}
    >
      <DocSection title="1. Create your account">
        <DocSteps>
          <DocStep index={1} title="Sign up">
            Head to <code>/signup</code> and create an account with your work
            email. If your church already uses Stillwell SSO, click{" "}
            <strong>Sign in with SSO</strong> on the login page.
          </DocStep>
          <DocStep index={2} title="Verify your email">
            Check your inbox for a verification email from{" "}
            <code>mars@noreply.stillwell.cloud</code> and click the link. You
            must verify before uploading cards.
          </DocStep>
          <DocStep index={3} title="Create your organization">
            After verifying, you&rsquo;ll be guided through onboarding. Give your
            organization a name (usually your church or ministry name) and
            confirm.
          </DocStep>
        </DocSteps>
      </DocSection>

      <DocSection title="2. Invite your team">
        <p>
          Go to <strong>Settings &rarr; Team Members</strong> and click{" "}
          <strong>Invite</strong>. Choose a role for each teammate:
        </p>
        <ul className="ml-6 list-disc space-y-1">
          <li>
            <strong>Admin</strong> &mdash; full access including billing and
            settings.
          </li>
          <li>
            <strong>Editor</strong> &mdash; can upload, review, and assign
            cards.
          </li>
          <li>
            <strong>Reviewer</strong> &mdash; can review and confirm OCR
            results, but not change settings.
          </li>
          <li>
            <strong>Viewer</strong> &mdash; read-only access to cards and
            reports.
          </li>
        </ul>
        <p>
          Invites expire after 7 days. You can revoke an unused invitation from
          the same page.
        </p>
      </DocSection>

      <DocSection title="3. Configure a form template">
        <p>
          Echo uses <strong>form templates</strong> to know what fields to
          extract from each card. Head to{" "}
          <strong>Settings &rarr; Form Templates</strong> and either start from
          a starter template or build your own.
        </p>
        <DocCallout tone="tip" title="Tip">
          The default &ldquo;Response Card&rdquo; template handles name, email,
          phone, and attendance &mdash; a great starting point for most
          churches.
        </DocCallout>
      </DocSection>

      <DocSection title="4. Upload your first card">
        <DocSteps>
          <DocStep index={1} title="Click Upload">
            Use the <strong>Upload</strong> button in the top bar, or press{" "}
            <code>&#8984;K</code> and choose <strong>Upload Documents</strong>.
          </DocStep>
          <DocStep index={2} title="Pick files">
            Drag &amp; drop PDFs, JPGs, or PNGs. You can upload up to 50 files
            at a time.
          </DocStep>
          <DocStep index={3} title="Review the extraction">
            Echo processes each card in the background. Head to{" "}
            <strong>Response Cards</strong> to review extracted fields, correct
            anything, and assign the card to a person.
          </DocStep>
        </DocSteps>
      </DocSection>

      <DocNext
        href="/docs/uploading-cards"
        title="Uploading Cards"
        description="Learn about every way to get cards into Echo — manual, email, FTP, and more."
      />
    </DocArticle>
  );
}
