oms-website-nextjs/app/(website)/obse/page.tsx

import Image from "next/image";
import Link from "next/link";
import { Metadata } from "next"; // Added import
import {
  FaArrowRight,
  FaCheckCircle,
  FaCogs,
  FaDatabase,
  FaEnvelope,
  FaExclamationTriangle,
  FaFileAlt,
  FaFileInvoiceDollar,
  FaFingerprint,
  FaHandshake,
  FaHistory,
  FaLaptopCode,
  FaLayerGroup,
  FaLightbulb,
  FaPhone,
  FaPlayCircle,
  FaPuzzlePiece,
  FaSearchDollar,
  FaShieldAlt,
  FaShippingFast,
  FaSignInAlt,
  FaSpinner,
  FaSyncAlt,
  FaTachometerAlt,
  FaUserCheck,
  FaUsersCog,
  FaWrench,
} from "react-icons/fa";
import { COLORS } from "@/constants"; // Assuming COLORS constant is available
import ContactForm from "@/components/ContactForm"; // Assuming ContactForm is available

// SEO Metadata
export const metadata: Metadata = {
  title: "Automated Bank Statement Extraction South Africa | OBSE by OMS",
  description:
    "Revolutionize lending with OBSE: Automated bank statement data extraction, OCR, fraud detection, and analysis for South African financial institutions. Improve accuracy, speed, and decision-making.",
  keywords: [
    "Optimized Bank Statement Extractor",
    "OBSE",
    "bank statement extraction",
    "OCR bank statements",
    "automated financial data",
    "South Africa",
    "lending automation",
    "credit risk assessment",
    "income verification",
    "affordability calculation",
    "fraud detection",
    "financial technology",
    "fintech SA",
    "OMS",
    "Owethu Management Services",
  ],
  // Optional: Add Open Graph and Twitter Card metadata for social sharing
  openGraph: {
    title: "Automated Bank Statement Extraction South Africa | OBSE by OMS",
    description:
      "Streamline your financial processes with OBSE's intelligent bank statement analysis.",
    url: "https://www.oms.africa/obse", // Replace with your actual URL
    images: [
      {
        url: "/images/obse-og-image.png", // Replace with an appropriate OG image URL
        width: 1200,
        height: 630,
        alt: "OBSE Automated Bank Statement Extraction",
      },
    ],
    locale: "en_ZA",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Automated Bank Statement Extraction South Africa | OBSE by OMS",
    description:
      "Fast, accurate bank statement processing for SA lenders with OBSE.",
    // images: ['/images/obse-twitter-image.png'], // Replace with Twitter-specific image if needed
  },
};

// Define structure for features, benefits, etc. if needed for mapping
interface FeatureItem {
  icon: React.ElementType;
  title: string;
  description: string;
  isComingSoon?: boolean;
}

const keyFeatures: FeatureItem[] = [
  {
    icon: FaShippingFast,
    title: "Automated Data Extraction",
    description:
      "Processes statements in seconds (avg. 9-12s), drastically reducing manual effort.",
  },
  {
    icon: FaFileAlt,
    title: "Advanced OCR Technology",
    description:
      "High accuracy, handles various fonts, obscured text (stamps), and similar characters.",
  },
  {
    icon: FaDatabase,
    title: "Comprehensive SA Bank Coverage",
    description:
      "Handles statements from all major SA banks and various formats (PDF, scanned, stamped).",
  },
  {
    icon: FaSearchDollar,
    title: "Intelligent Income Detection",
    description:
      "Identifies salaried/non-salaried income, provides explanations, and filters out transfers.",
  },
  {
    icon: FaFingerprint,
    title: "Enhanced Fraud Detection",
    description:
      "Detects document tampering, fraudulent insertions, and developing behavioral profiling.",
    isComingSoon: true,
  },
  {
    icon: FaSyncAlt,
    title: "Dynamic Data Interaction",
    description:
      "User-friendly interface for real-time transaction recategorization with immediate recalculations.",
  },
  {
    icon: FaLaptopCode,
    title: "Seamless API Integration",
    description:
      "Push structured, validated data directly into your credit scoring or loan origination systems.",
  },
  {
    icon: FaTachometerAlt,
    title: "Visual Analytics & Reporting",
    description:
      "Intuitive dashboards for insights into cash flow, income sources, and spending patterns.",
  },
  {
    icon: FaUsersCog,
    title: "MI Dashboard & Performance Tracking",
    description:
      "Monitor processing volumes, success rates, average times, and user performance.",
  },
  {
    icon: FaSignInAlt,
    title: "Multiple Export Formats",
    description:
      "Download results as structured Excel, formatted PDFs, or copy data easily.",
  },
  {
    icon: FaCheckCircle,
    title: "Built-in Accuracy Checks",
    description:
      "Includes automated validations and data reviews for uncertain extractions.",
  },
  {
    icon: FaHistory,
    title: "Comprehensive Audit Trail",
    description:
      "Maintains a detailed log of processing steps and user interactions for compliance and traceability.",
  },
];

const coreBenefits: FeatureItem[] = [
  {
    icon: FaShippingFast,
    title: "Dramatically Reduce Processing Time",
    description: "Cut statement analysis from hours to minutes/seconds.",
  },
  {
    icon: FaCheckCircle,
    title: "Ensure High Accuracy & Reliability",
    description: "Minimize human error with advanced OCR and validation.",
  },
  {
    icon: FaFileInvoiceDollar,
    title: "Lower Operational Costs",
    description: "Reduce reliance on manual data entry staff and overheads.",
  },
  {
    icon: FaShieldAlt,
    title: "Strengthen Fraud Prevention",
    description:
      "Proactively identify tampered documents and suspicious activity.",
  },
  {
    icon: FaTachometerAlt,
    title: "Accelerate Turnaround Times",
    description:
      "Speed up loan applications, credit assessments, and onboarding.",
  },
  {
    icon: FaLightbulb,
    title: "Improve Decision-Making",
    description: "Base assessments on accurate, comprehensive, fast data.",
  },
  {
    icon: FaCogs,
    title: "Enhance Operational Efficiency",
    description:
      "Streamline workflows and free up staff for higher-value tasks.",
  },
  {
    icon: FaUserCheck,
    title: "Improve Compliance",
    description: "Ensure consistent and accurate data handling.",
  },
];

const dataOutputs = [
  "Basic Transaction Summary",
  "Debit Order Analysis",
  "Disposable Income Calculation",
  "Affordability Assessment Data",
  "Income & Expenses Breakdown",
  "Detailed Transaction List (Exportable)",
  "Fraud Indicators & Flags",
];

const useCases = [
  "Lending & Credit Origination (Personal, Vehicle, SME)",
  "Credit Risk Assessment",
  "Income Verification Automation",
  "Affordability Calculations",
  "Customer Onboarding (KYC)",
  "Financial Health Monitoring",
  "Internal Audit & Reconciliation",
  "Fraud Investigation Support",
];

export default function ObsePage() {
  return (
    <div className="bg-white text-gray-800 overflow-x-hidden dark:bg-gray-900 dark:text-gray-200 font-poppins">
      {/* 1. Hero Section */}
      <section className="relative bg-gradient-to-r from-gray-800 via-gray-700 to-gray-900 text-white py-20 md:py-32">
        <div className="absolute inset-0 bg-black opacity-40 dark:opacity-60"></div>
        {/* Optional: Add a subtle background pattern or image */}
        {/* <div className="absolute inset-0 bg-[url('/path/to/hero-bg.png')] bg-cover bg-center opacity-10"></div> */}
        <div className="container mx-auto px-6 text-center relative z-10">
          {/* Consider adding OMS Logo here */}
          {/* <Image src="/oms-logo-white.png" alt="OMS Logo" width={150} height={50} className="mx-auto mb-6" /> */}
          <h1
            className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 font-poppins drop-shadow-md"
            style={{ color: COLORS.primary }} // Use gold color
          >
            Revolutionize Your Lending and Credit Processes with OBSE
          </h1>
          <p className="text-lg md:text-xl max-w-4xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 mb-8">
            Automate data extraction, enhance accuracy, detect fraud, and
            accelerate decision-making with South Africa&apos;s intelligent bank
            statement solution.
          </p>
          <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
            <Link
              href="#how-it-works" // Link to the "How it Works" section
              className="inline-flex items-center justify-center bg-gold-500 text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300"
              style={{ backgroundColor: COLORS.primary }}
            >
              <FaPlayCircle className="inline mr-2 text-red-400" /> See How It
              Works
            </Link>
            {/* Optional Mini-CTA */}
            {/* <Link href="#overview-video" className="inline-flex items-center text-gold-400 hover:text-gold-300 transition-colors duration-300">
              <FaPlayCircle className="mr-2" /> Watch a Quick Overview
            </Link> */}
          </div>
        </div>
      </section>

      {/* 2. The Challenge Section */}
      <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
        <div className="container mx-auto px-6">
          <div className="text-center mb-12 md:mb-16">
            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
              The High Cost of Manual Bank Statement Processing
            </h2>
            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
              In the rapidly evolving landscape of financial services, where
              precision and speed are paramount, the challenges associated with
              extracting data from bank statements can become significant
              roadblocks. Efficiently parsing financial information is critical
              for accurately assessing financial health and risk.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              {
                icon: FaSpinner,
                title: "Slow & Labor-Intensive",
                desc: "Teams spend countless hours manually keying in data, causing operational bottlenecks.",
              },
              {
                icon: FaExclamationTriangle,
                title: "Prone to Human Error",
                desc: "Manual entry risks inaccurate assessments, compliance breaches, and poor decisions.",
              },
              {
                icon: FaFileInvoiceDollar,
                title: "High Operational Costs",
                desc: "Significant resources consumed managing large volumes of statements manually.",
              },
              {
                icon: FaShieldAlt,
                title: "Limited Fraud Detection",
                desc: "Identifying sophisticated fraud or tampered documents manually is difficult and slow.",
              },
              {
                icon: FaTachometerAlt,
                title: "Long Turnaround Times",
                desc: "Slow processing delays approvals, causing customer dissatisfaction and missed opportunities.",
              },
              {
                icon: FaLayerGroup,
                title: "Scalability Challenges",
                desc: "Manual workflows bottleneck quickly, making it difficult to handle growing statement volumes efficiently.",
              },
            ].map((item) => (
              <div
                key={item.title}
                className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md text-center transform transition duration-300 hover:-translate-y-1 hover:shadow-lg"
              >
                <item.icon
                  className="text-4xl 0 mx-auto mb-4"
                  style={{ color: "#e1c44a" }} // Using red to signify pain points
                  //text-red-500 dark:text-red-40
                />
                <h4 className="text-xl font-semibold mb-2 font-poppins dark:text-white">
                  {item.title}
                </h4>
                <p className="text-gray-600 dark:text-gray-300 text-sm">
                  {item.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 3. Introducing OBSE Section */}
      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl md:text-4xl font-bold mb-6 font-poppins text-gray-900 dark:text-white leading-tight">
                OBSE: Automated Accuracy, Speed, and Insight
              </h2>
              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
                Optimized Bank Statement Extractor (OBSE) is an advanced OCR and
                data aggregation platform designed specifically for the South
                African financial landscape. It seamlessly extracts
                comprehensive, accurate data from any bank statement (individual
                or juristic, across all SA banks), regardless of format –
                including PDFs, scanned images, stamped documents, and even
                disorganized statements.
              </p>
              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-semibold">
                OBSE transforms raw bank statement data into actionable
                financial intelligence in seconds, eliminating manual drudgery
                and empowering your teams to make faster, smarter decisions.
              </p>
            </div>
            <div className="relative h-64 md:h-80 rounded-lg overflow-hidden shadow-lg">
              {/* Placeholder for UI Screenshot */}
              <Image
                src="/images/obse.svg" // Replace with actual path
                alt="OBSE Upload Interface"
                layout="fill"
                objectFit="cover"
                className="bg-gray-200 dark:bg-gray-700" // Placeholder background
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
            </div>
          </div>
        </div>
      </section>

      {/* 4. How OBSE Works Section */}
      <section
        id="how-it-works"
        className="py-16 md:py-24 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700"
      >
        <div className="container mx-auto px-6">
          <div className="text-center mb-12 md:mb-16">
            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
              From PDF to Insights in Seconds
            </h2>
            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
              OBSE simplifies complex data extraction into a streamlined
              workflow.
            </p>
          </div>
          {/* Consider a visual flow diagram or stepped cards */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6 text-center">
            {[
              {
                step: 1,
                title: "Upload",
                desc: "Easily upload single multi-month PDFs or separate monthly files.",
                icon: FaSignInAlt,
              },
              {
                step: 2,
                title: "Automated Extraction",
                desc: "Powerful engine reads, structures, and validates data in seconds.",
                icon: FaCogs,
              },
              {
                step: 3,
                title: "Analysis & Fraud Checks",
                desc: "Analyzes transactions, identifies income, flags fraud indicators.",
                icon: FaSearchDollar,
              },
              {
                step: 4,
                title: "Review & Interact",
                desc: "User-friendly interface to review, recategorize, and view insights.",
                icon: FaUserCheck,
              },
              {
                step: 5,
                title: "Access & Integrate",
                desc: "Export data (Excel, PDF) or integrate results via API.",
                icon: FaLaptopCode,
              },
            ].map((item) => (
              <div
                key={item.step}
                className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md"
              >
                <div
                  className="w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4 text-white font-bold text-xl"
                  style={{ backgroundColor: COLORS.primary }}
                >
                  {item.step}
                </div>
                <item.icon
                  className="text-3xl text-gold-500 dark:text-gold-400 mx-auto mb-3"
                  style={{ color: COLORS.primary }}
                />
                <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
                  {item.title}
                </h4>
                <p className="text-gray-600 dark:text-gray-300 text-sm">
                  {item.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 5. Key Features Section */}
      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-6">
          <div className="text-center mb-12 md:mb-16">
            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
              Unlock Deeper Financial Understanding
            </h2>
            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
              Explore the powerful capabilities that drive OBSE&apos;s
              performance.
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            {keyFeatures.map((feature) => (
              <div
                key={feature.title}
                className="relative bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm border-t-4 border-gold-500 dark:border-gold-400 transition-shadow hover:shadow-md"
                style={{ borderColor: COLORS.primary }}
              >
                {feature.isComingSoon && (
                  <span className="absolute top-2 right-2 px-3 py-1 text-sm font-bold bg-cyan-700 text-white rounded-full shadow-lg z-10 font-poppins">
                    Coming Soon
                  </span>
                )}
                <feature.icon
                  className="text-3xl mb-3 text-gold-500 dark:text-gold-400"
                  style={{ color: COLORS.primary }}
                />
                <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
                  {feature.title}
                </h4>
                <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
                  {feature.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 6. Core Benefits Section */}
      <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
        <div className="container mx-auto px-6">
          <div className="text-center mb-12 md:mb-16">
            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
              The OBSE Advantage: Transform Your Operations
            </h2>
            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
              Experience tangible benefits that impact your bottom line and
              efficiency.
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            {coreBenefits.map((benefit) => (
              <div
                key={benefit.title}
                className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md text-center transform transition duration-300 hover:-translate-y-1 hover:shadow-lg"
              >
                <benefit.icon
                  className="text-4xl text-gold-500 dark:text-gold-400 mx-auto mb-4"
                  style={{ color: COLORS.primary }}
                />
                <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
                  {benefit.title}
                </h4>
                <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
                  {benefit.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 7. Data Outputs & Insights Section */}
      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div className="relative h-64 md:h-96 rounded-lg overflow-hidden shadow-lg">
              {/* Placeholder for Dashboard Example */}
              <Image
                src="/images/dashboard.png" // Replace with actual path
                alt="OBSE Dashboard Insights"
                layout="fill"
                objectFit="contain" // Use contain if showing a full dashboard
                className="bg-gray-100 dark:bg-gray-800 p-4" // Add padding if needed
              />
            </div>
            <div>
              <h2 className="text-3xl md:text-4xl font-bold mb-6 font-poppins text-gray-900 dark:text-white leading-tight">
                Actionable Intelligence at Your Fingertips
              </h2>
              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
                OBSE delivers a suite of standard financial summaries and
                detailed data points essential for informed decisions:
              </p>
              <ul className="space-y-3">
                {dataOutputs.map((output) => (
                  <li key={output} className="flex items-start">
                    <FaCheckCircle
                      className="w-5 h-5 text-green-500 dark:text-green-400 mr-3 mt-1 flex-shrink-0"
                      style={{ color: COLORS.primary }} // Or use primary color
                    />
                    <span className="text-gray-700 dark:text-gray-300">
                      {output}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* 8. Technology Deep Dive Section */}
      <section className="py-16 md:py-24 bg-gray-800 text-white">
        <div className="container mx-auto px-6">
          <div className="text-center mb-12 md:mb-16">
            <FaCogs
              className="text-5xl text-gold-500 mx-auto mb-4"
              style={{ color: COLORS.primary }}
            />
            <h2 className="text-3xl md:text-4xl font-bold font-poppins mb-4">
              Leveraging Advanced Technology for Reliable Results
            </h2>
            <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed text-gray-300">
              Built on a foundation of cutting-edge technology to ensure
              performance and accuracy.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
            {[
              {
                title: "Advanced OCR Engine",
                desc: "Fine-tuned for diverse SA bank statements, handling stamps and challenging inputs.",
                icon: FaFileAlt,
              },
              {
                title: "Machine Learning",
                desc: "Continuously improves interpretation, context analysis, and fraud detection models.",
                icon: FaLightbulb,
              },
              {
                title: "Data Structuring & Validation",
                desc: "Intelligently structures data, validates entries, and applies rules for consistency.",
                icon: FaPuzzlePiece,
              },
              {
                title: "Secure API",
                desc: "Robust and secure API for seamless and safe integration with your existing systems.",
                icon: FaShieldAlt,
              },
            ].map((item) => (
              <div
                key={item.title}
                className="bg-gray-700 p-6 rounded-lg text-center"
              >
                <item.icon
                  className="text-4xl text-gold-500 mx-auto mb-4"
                  style={{ color: COLORS.primary }}
                />
                <h4 className="text-xl font-semibold mb-2 font-poppins text-white">
                  {item.title}
                </h4>
                <p className="text-gray-300 text-sm">{item.desc}</p>
              </div>
            ))}
          </div>
          {/* Optional: Add JSON snippet visual */}
          {/* <div className="mt-12 max-w-2xl mx-auto bg-gray-900 p-4 rounded-lg shadow-lg">
            <pre><code className="language-json text-sm">
              {`{
  "transaction_id": "T12345",
  "date": "2023-10-26",
  "description": "SALARY ABC CORP",
  "amount": 15000.00,
  "type": "credit",
  "category": "Income/Salary"
}`}
            </code></pre>
          </div> */}
        </div>
      </section>

      {/* 9. Use Cases & Applications Section */}
      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-6">
          <div className="text-center mb-12 md:mb-16">
            <FaWrench
              className="text-5xl text-gold-500 mx-auto mb-4"
              style={{ color: COLORS.primary }}
            />
            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
              Empowering Various Financial Processes
            </h2>
            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
              OBSE provides critical data and automation for a wide range of
              applications.
            </p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6 max-w-5xl mx-auto">
            {useCases.map((useCase) => (
              <div
                key={useCase}
                className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow-sm text-center"
              >
                <p className="text-sm font-medium text-gray-800 dark:text-gray-200">
                  {useCase}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 10. Customization & Partnership Section */}
      <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
        <div className="container mx-auto px-6 text-center">
          <FaHandshake
            className="text-5xl text-gold-500 mx-auto mb-4"
            style={{ color: COLORS.primary }}
          />
          <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
            Flexible Solutions Tailored to Your Needs
          </h2>
          <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-4xl mx-auto mb-6 leading-relaxed">
            Beyond our standard offerings, we understand unique needs. If you
            require specific information or analysis not in our standard
            package, we&apos;ll collaborate to develop tailor-made outputs
            aligned with your requirements. Our goal is to ensure OBSE exceeds
            your expectations.
          </p>
          <p className="text-md md:text-lg text-gray-800 dark:text-gray-200 font-semibold max-w-4xl mx-auto">
            We offer Proof of Concept (POC) engagements to demonstrate
            OBSE&apos;s capabilities with your data and workflows, allowing you
            to evaluate its potential impact before full commitment.
          </p>
        </div>
      </section>

      {/* 11. About OMS Section (Brief) */}
      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-6 text-center">
          {/* Optional: OMS Logo */}
          <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
            Your Experienced Partner in Financial Technology
          </h2>
          <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto mb-6">
            Owethu Management Solutions (OMS) provides professional technology
            services with a proven track record, including participation in
            ABSA&apos;s supplier development program since 2020. OBSE is backed
            by a dedicated team committed to delivering robust, user-friendly
            solutions that solve real-world business challenges.
          </p>
          <Link
            href="/about"
            className="text-gold-600 dark:text-gold-400 hover:text-gold-700 dark:hover:text-gold-300 font-semibold transition-colors duration-300 inline-flex items-center"
            style={{ color: COLORS.primary }}
          >
            Learn More About OMS <FaArrowRight className="ml-2" />
          </Link>
        </div>
      </section>

      {/* 12. Call to Action (CTA) Section */}
      <section
        className="py-16 md:py-24 bg-gold-500 text-gray-900"
        style={{ backgroundColor: COLORS.primary }}
      >
        <div className="container mx-auto px-6 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins">
            Ready to Transform Your Bank Statement Processing?
          </h2>
          <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed mb-8 font-poppins text-gray-800">
            See OBSE in action! Schedule a live demo tailored to your specific
            use case and discover how OBSE can streamline your operations,
            reduce costs, and mitigate risk.
          </p>
          <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
            <Link
              href="/contact?subject=OBSE Demo Request" // Pre-fill subject for contact form
              className="inline-block bg-gray-800 text-white font-bold py-3 px-8 rounded-md hover:bg-gray-900 dark:bg-gray-900 dark:hover:bg-black transition-colors duration-300"
            >
              Request a Personalized Demo
            </Link>
            <Link
              href="/contact?subject=OBSE Sales Inquiry" // Pre-fill subject
              className="inline-block bg-transparent border-2 border-gray-800 text-gray-800 font-bold py-3 px-8 rounded-md hover:bg-gray-800 hover:text-white transition-colors duration-300"
            >
              Contact Sales Team
            </Link>
          </div>
          {/* Optional: Download Brochure Link */}
          {/* <div className="mt-6">
            <a href="/path/to/obse-brochure.pdf" download className="text-sm text-gray-800 hover:underline">
              Download Brochure
            </a>
          </div> */}
        </div>
      </section>

      {/* 13. Contact Information Section */}
      <section className="py-16 md:py-24 bg-gray-100 dark:bg-gray-800">
        <div className="container mx-auto px-6">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
              Get in Touch
            </h2>
            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
              For personalized support or to schedule a demo, reach out to us.
              Our team is here to help you harness the power of automated data
              extraction. Take the first step toward enhancing your efficiency
              and driving your success!
            </p>
          </div>
          <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
            {/* Contact Details */}
            <div className="space-y-6">
              <div className="flex items-center space-x-4">
                <FaPhone
                  className="w-6 h-6 text-gold-500 dark:text-gold-400 flex-shrink-0"
                  style={{ color: COLORS.primary }}
                />
                <div>
                  <h3 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
                    Phone
                  </h3>
                  <a
                    href="tel:+27120513281" // Updated phone number
                    className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
                  >
                    (012) 051 3281
                  </a>
                </div>
              </div>
              <div className="flex items-center space-x-4">
                <FaEnvelope
                  className="w-6 h-6 text-gold-500 dark:text-gold-400 flex-shrink-0"
                  style={{ color: COLORS.primary }}
                />
                <div>
                  <h3 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
                    Email
                  </h3>
                  <a
                    href="mailto:Zanelem@oms.africa" // Updated email
                    className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
                  >
                    Zanelem@oms.africa
                  </a>
                </div>
              </div>
              {/* Optional: Link to main contact page */}
              <Link
                href="/contact"
                className="inline-flex items-center text-gold-600 dark:text-gold-400 hover:text-gold-700 dark:hover:text-gold-300 font-semibold transition-colors duration-300"
                style={{ color: COLORS.primary }}
              >
                Go to Full Contact Page <FaArrowRight className="ml-2" />
              </Link>
            </div>

            {/* Optional: Simple Contact Form (if ContactForm component is not used/available) */}
            {/* <form className="space-y-4">
              <div>
                <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
                <input type="text" id="name" name="name" required className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-gold-500 focus:border-gold-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
              </div>
              <div>
                <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
                <input type="email" id="email" name="email" required className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-gold-500 focus:border-gold-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
              </div>
              <div>
                <label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message</label>
                <textarea id="message" name="message" rows={4} required className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-gold-500 focus:border-gold-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"></textarea>
              </div>
              <button type="submit" className="w-full bg-gold-500 text-gray-900 font-bold py-2 px-4 rounded-md hover:bg-gold-600 transition-colors duration-300" style={{ backgroundColor: COLORS.primary }}>
                Send Message
              </button>
            </form> */}

            {/* OR Use the ContactForm Component */}
            <div className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold font-poppins text-gray-900 dark:text-white mb-4">
                Send a Quick Inquiry
              </h3>
              <ContactForm />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}