"use client";

import {
  ScanLine,
  Eye,
  FileCheck,
  RefreshCw,
  Brain,
  Layers,
  CheckCircle,
  Sparkles,
} from "lucide-react";
import { FeaturePageShell, DetailBlock, StatRow } from "@/components/marketing/feature-page-shell";

const extractedFields = [
  "Full name",
  "Gender",
  "Date of birth",
  "Marital status",
  "Cell & home phone",
  "Email address",
  "Mailing address",
  "Visit type (first-time, returning, etc.)",
  "Prayer requests",
  "Confidential prayer flags",
  "Spiritual decisions (baptism, salvation)",
  "Service attended",
  "Campus preference",
  "How they heard about you",
  "Message topics of interest",
  "Next-step commitments",
];

export default function AiOcrPage() {
  return (
    <FeaturePageShell
      badge="Core Technology"
      badgeIcon={ScanLine}
      title="AI that reads handwriting"
      titleAccent="like your best volunteer."
      subtitle="Echo's vision AI extracts 20+ fields from every response card — names, phone numbers, prayer requests, spiritual decisions — even when the handwriting is messy."
    >
      <section className="py-12 sm:py-16">
        <div className="mx-auto max-w-4xl px-6 space-y-6">
          <StatRow
            stats={[
              { value: "20+", label: "Fields extracted per card" },
              { value: "95%", label: "Accuracy on printed text" },
              { value: "85-95%", label: "Accuracy on handwriting" },
              { value: "<30s", label: "Average processing time" },
            ]}
          />

          <DetailBlock icon={Eye} title="Vision AI, not template matching">
            <p>
              Unlike traditional OCR that relies on fixed zones and templates, Echo
              uses multimodal vision AI to understand the entire card. It reads
              handwritten text, identifies checked boxes, interprets context, and
              extracts structured data — even from cards it has never seen before.
            </p>
            <p>
              This means you don&rsquo;t need to redesign your cards or train the
              system. Whether you use pre-printed forms, custom cards, or a mix of
              both, Echo figures it out.
            </p>
          </DetailBlock>

          <DetailBlock icon={Layers} title="Duplex PDF support with automatic page pairing" reversed>
            <p>
              Scan a full stack of double-sided cards through your office scanner. Echo
              automatically pairs front and back pages, rotates them for readability,
              and extracts data from both sides as a single record.
            </p>
            <p>
              Supports PDF (multi-page), JPEG, PNG, and WebP. Files up to 50 MB each.
            </p>
          </DetailBlock>

          <DetailBlock icon={Brain} title="Smart field extraction">
            <p>
              Every card is analyzed for all of the following fields. Echo only fills
              in what it can confidently read — and flags the rest for human review.
            </p>
            <div className="grid sm:grid-cols-2 gap-x-6 gap-y-1.5 mt-3">
              {extractedFields.map((field) => (
                <div key={field} className="flex items-center gap-2">
                  <CheckCircle className="h-3.5 w-3.5 text-primary shrink-0" />
                  <span>{field}</span>
                </div>
              ))}
            </div>
          </DetailBlock>

          <DetailBlock icon={Sparkles} title="Confidence scoring & human review" reversed>
            <p>
              Every extraction includes a confidence score. High-confidence fields are
              accepted automatically, while low-confidence results are highlighted so
              your team can quickly verify and correct them. Nothing syncs to your CRM
              until a human approves it.
            </p>
          </DetailBlock>

          <DetailBlock icon={FileCheck} title="Automatic date and event assignment">
            <p>
              Echo intelligently assigns first-time guest dates and salvation dates
              based on card context and your service schedule. A card scanned on Monday
              morning? It knows it came from last Sunday&rsquo;s service.
            </p>
          </DetailBlock>

          <DetailBlock icon={RefreshCw} title="One-click reprocessing" reversed>
            <p>
              Made changes to a card image? Want to try again with different AI
              settings? Reprocess individual cards, entire batches, or specific jobs
              with one click. The original images are always preserved.
            </p>
          </DetailBlock>
        </div>
      </section>
    </FeaturePageShell>
  );
}
