// app/obse/page.tsx

import Image from "next/image";
import Link from "next/link"; // Import Link for internal navigation
import {
  FaBolt, // Represents speed, automation
  FaExclamationTriangle, // Represents challenges, risks
  FaLightbulb, // Represents solution, intelligence
  FaCogs, // Represents how it works, engine
  FaThumbsUp, // Represents benefits, advantages
  FaChartPie, // Represents data outputs, insights
  FaMicrochip, // Represents technology
  FaBriefcase, // Represents use cases
  FaUsersCog, // Represents customization, partnership
  FaInfoCircle, // Represents about section (alternative)
  FaPhoneAlt, // Represents contact
  FaPlayCircle, // Optional for mini-CTA
  FaArrowRight, // For CTAs or steps
  FaFilePdf, // For PDF/Statement icon
  FaSearchDollar, // For income detection
  FaShieldAlt, // For fraud detection
  FaNetworkWired, // For API integration
  FaTable, // For data structuring
  FaBrain, // For Machine Learning
  FaBusinessTime, // For turnaround time
  FaHourglassHalf, // For reducing time
  FaHandHoldingUsd, // For operational costs
  FaUserCheck, // For accuracy
  FaChartLine, // For efficiency/profitability
  FaClipboardList, // For transaction summary
  FaCalendarAlt, // For debit orders
  FaMoneyBillWave, // For disposable income
  FaBalanceScale, // For affordability
  FaExchangeAlt, // For Income/Expenses
  FaEye, // For review/interact step
  FaUpload, // For upload step
  FaPaperPlane,
  FaCheckCircle, // For access/integrate step
} from "react-icons/fa";

const keyFeatures = [
  {
    icon: FaBolt,
    title: "Automated Data Extraction",
    description:
      "Processes statements in seconds (avg. 9-12s), drastically reducing manual effort.",
  },
  {
    icon: FaUserCheck, // Using accuracy icon here
    title: "Advanced OCR Technology",
    description:
      "High accuracy, reads varied fonts, handles stamps, and distinguishes similar characters ('7' vs 'Z').",
  },
  {
    icon: FaFilePdf,
    title: "Comprehensive SA Bank Coverage",
    description:
      "Handles statements from all major SA banks and various formats (PDF, scanned, stamped, multi/single page).",
  },
  {
    icon: FaSearchDollar,
    title: "Intelligent Income Detection",
    description:
      "Auto-identifies salaried/non-salaried income with suggestive logic and exclusionary rules.",
  },
  {
    icon: FaShieldAlt,
    title: "Enhanced Fraud Detection",
    description:
      "Detects document tampering, fraudulent transaction insertion, and developing ML-based behavioral profiling.",
  },
  {
    icon: FaCogs, // Using cogs for interaction/processing
    title: "Dynamic Data Interaction",
    description:
      "User-friendly interface for real-time transaction recategorization and immediate recalculations.",
  },
  {
    icon: FaNetworkWired,
    title: "Seamless API Integration",
    description:
      "Push structured, validated data directly into your credit scoring, LOS, or other internal systems.",
  },
  {
    icon: FaChartPie,
    title: "Visual Analytics & Reporting",
    description:
      "Intuitive dashboards showing cash flow, income sources, and spending patterns.",
  },
  {
    icon: FaTable, // Using table for dashboard data
    title: "MI Dashboard & Performance Tracking",
    description:
      "Monitor processing volumes, success rates, processing times, and user performance.",
  },
  {
    icon: FaTable,
    title: "Multiple Export Formats",
    description:
      "Download results as structured Excel, formatted PDFs, or copy data for easy transfer.",
  },
  {
    icon: FaCheckCircle, // Reusing from About Us for validation
    title: "Built-in Accuracy Checks",
    description:
      "Includes automated validations and data reviews for uncertain extractions to ensure reliability.",
  },
];

const coreBenefits = [
  {
    icon: FaHourglassHalf,
    title: "Dramatically Reduce Processing Time",
    description:
      "Cut down statement analysis from hours to mere minutes/seconds.",
  },
  {
    icon: FaUserCheck,
    title: "Ensure High Accuracy & Reliability",
    description:
      "Minimize human error with advanced OCR and built-in validation rules.",
  },
  {
    icon: FaHandHoldingUsd,
    title: "Lower Operational Costs",
    description:
      "Reduce reliance on manual data entry staff and associated overheads.",
  },
  {
    icon: FaShieldAlt,
    title: "Strengthen Fraud Prevention",
    description:
      "Proactively identify tampered documents and suspicious financial activity.",
  },
  {
    icon: FaBusinessTime,
    title: "Accelerate Turnaround Times",
    description:
      "Speed up loan applications, credit assessments, and customer onboarding.",
  },
  {
    icon: FaBrain, // Using brain for better decisions
    title: "Improve Decision-Making",
    description:
      "Base assessments on accurate, comprehensive, and rapidly available data.",
  },
  {
    icon: FaChartLine,
    title: "Enhance Operational Efficiency",
    description: "Streamline workflows, free up staff for higher-value tasks.",
  },
  {
    icon: FaThumbsUp, // Using thumbs up for compliance
    title: "Improve Compliance",
    description:
      "Ensure consistent and accurate data handling for regulatory requirements.",
  },
];

const dataOutputs = [
  {
    icon: FaClipboardList,
    title: "Basic Transaction Summary",
    description:
      "Concise overview of transactions for spending pattern analysis.",
  },
  {
    icon: FaCalendarAlt,
    title: "Debit Order Analysis",
    description: "Clear tracking of recurring payments and regular expenses.",
  },
  {
    icon: FaMoneyBillWave,
    title: "Disposable Income Calculation",
    description: "Assessment of available funds after essential expenses.",
  },
  {
    icon: FaBalanceScale,
    title: "Affordability Assessment Data",
    description: "Key data points to support financial capability evaluation.",
  },
  {
    icon: FaExchangeAlt,
    title: "Income & Expenses Breakdown",
    description: "Detailed insights into financial inflows and outflows.",
  },
  {
    icon: FaTable,
    title: "Detailed Transaction List",
    description:
      "Full, structured transaction data exportable for deep analysis.",
  },
  {
    icon: FaExclamationTriangle,
    title: "Fraud Indicators",
    description:
      "Flags for potentially suspicious documents or transaction patterns.",
  },
];

const useCases = [
  { title: "Lending & Credit Origination (Personal, VAF, SME)" },
  { title: "Credit Risk Assessment & Scoring Input" },
  { title: "Automated Income Verification" },
  { title: "Affordability Calculations & Compliance Checks" },
  { title: "Faster Customer Onboarding (KYC/Financial)" },
  { title: "Portfolio Financial Health Monitoring" },
  { title: "Internal Audit & Reconciliation Support" },
  { title: "Fraud Investigation Data Preparation" },
];

export default function ObsePage() {
  return (
    <>
      <section className="relative bg-gradient-to-r from-gray-800 via-gray-700 to-gray-900 text-white py-24 md:py-40">
        <div className="absolute inset-0 bg-black opacity-40 dark:opacity-60"></div>
        <div className="absolute inset-0 bg-cover bg-center opacity-10 dark:opacity-5"></div>
        <div className="container mx-auto px-6 text-center relative z-10">
          <div className="mb-6 inline-block bg-gold-500/10 p-3 rounded-lg border border-gold-500/30">
            <Image
              src="/images/oms-logo-light.png"
              alt="OMS Logo"
              width={80}
              height={40}
              className="h-10 w-auto"
            />
          </div>
          <h1 className="text-4xl md:text-6xl font-bold mb-4 font-poppins text-gold-500 drop-shadow-md">
            Revolutionize Lending with OBSE
          </h1>
          <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 font-poppins mb-8">
            Automate data extraction, enhance accuracy, detect fraud, and
            accelerate decision-making with South Africa's intelligent bank
            statement solution: Owethu Bank Statement Extraction.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <Link
              href="#contact"
              className="inline-block bg-gold-500 text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 dark:hover:bg-gold-400 transition-colors duration-300 font-poppins"
            >
              Request a Demo <FaArrowRight className="inline ml-2" />
            </Link>
            <Link
              href="#how-it-works"
              className="inline-block bg-transparent border-2 border-gold-500 text-gold-500 font-bold py-3 px-8 rounded-md hover:bg-gold-500/10 transition-colors duration-300 font-poppins"
            >
              <FaPlayCircle className="inline mr-2" /> See How It Works
            </Link>
          </div>
          <p className="text-sm text-gray-400 mt-6 font-poppins">
            Keywords: Bank Statement Extraction, OCR, Automation, Financial Data
            Analysis, South Africa
          </p>
        </div>
      </section>

      <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div>
              <FaExclamationTriangle
                className="text-5xl text-gold-500 mb-4"
                style={{ color: "#e1c44a" }}
              />
              <h2 className="text-3xl md:text-4xl font-bold mb-6 font-poppins text-gray-900 dark:text-white leading-tight">
                The High Cost of Manual Bank Statement Processing
              </h2>
              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6 font-poppins">
                In the rapidly evolving landscape of financial services, where
                precision and speed are paramount, extracting data from bank
                statements manually creates significant roadblocks. Efficiently
                parsing financial information is critical for accurate risk
                assessment, yet reliance on manual methods impacts efficiency
                and decision-making.
              </p>
              <ul className="space-y-4 font-poppins">
                <li className="flex items-start">
                  <FaHourglassHalf
                    className="text-gold-500 mt-1 mr-3 flex-shrink-0"
                    style={{ color: "#e1c44a" }}
                  />
                  <span className="text-gray-700 dark:text-gray-300">
                    <strong className="dark:text-white">
                      Slow & Labor-Intensive:
                    </strong>{" "}
                    Countless hours spent on manual data entry lead to
                    operational bottlenecks.
                  </span>
                </li>
                <li className="flex items-start">
                  <FaUserCheck className="text-red-500 mt-1 mr-3 flex-shrink-0" />{" "}
                  {/* Using red for error */}
                  <span className="text-gray-700 dark:text-gray-300">
                    <strong className="dark:text-white">
                      Prone to Human Error:
                    </strong>{" "}
                    Mistakes risk inaccurate assessments, compliance breaches,
                    and poor decisions.
                  </span>
                </li>
                <li className="flex items-start">
                  <FaHandHoldingUsd
                    className="text-gold-500 mt-1 mr-3 flex-shrink-0"
                    style={{ color: "#e1c44a" }}
                  />
                  <span className="text-gray-700 dark:text-gray-300">
                    <strong className="dark:text-white">
                      High Operational Costs:
                    </strong>{" "}
                    Significant resources consumed managing large volumes
                    manually.
                  </span>
                </li>
                <li className="flex items-start">
                  <FaShieldAlt className="text-red-500 mt-1 mr-3 flex-shrink-0" />{" "}
                  {/* Using red for ineffective fraud detection */}
                  <span className="text-gray-700 dark:text-gray-300">
                    <strong className="dark:text-white">
                      Limited Fraud Detection:
                    </strong>{" "}
                    Manually identifying sophisticated fraud is difficult and
                    time-consuming.
                  </span>
                </li>
                <li className="flex items-start">
                  <FaBusinessTime
                    className="text-gold-500 mt-1 mr-3 flex-shrink-0"
                    style={{ color: "#e1c44a" }}
                  />
                  <span className="text-gray-700 dark:text-gray-300">
                    <strong className="dark:text-white">
                      Long Turnaround Times:
                    </strong>{" "}
                    Slow processing leads to customer dissatisfaction and lost
                    opportunities.
                  </span>
                </li>
              </ul>
            </div>
            <div className="relative h-72 md:h-96 rounded-lg overflow-hidden shadow-lg">
              <Image
                src="/images/manual-vs-automated.png" // Placeholder: Contrast image
                alt="Manual data entry challenges vs automated efficiency"
                layout="fill"
                objectFit="cover"
                className="transition-transform duration-500 hover:scale-105"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
            </div>
          </div>
        </div>
      </section>

      {/* --- 3. Introducing OBSE: The Intelligent Solution --- */}
      <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-72 md:h-96 rounded-lg overflow-hidden shadow-lg order-last md:order-first">
              {/* Use the UI screenshot showing upload */}
              <Image
                src="/images/obse-ui-upload.png" // Placeholder: Catalogue Page 4 Left
                alt="OBSE Bank Statement Upload Interface"
                layout="fill"
                objectFit="contain" // Use contain if you want to show the full UI without cropping
                className="p-4 bg-gray-100 dark:bg-gray-800" // Added padding and background
              />
            </div>
            <div>
              <FaLightbulb
                className="text-5xl text-gold-500 mb-4"
                style={{ color: "#e1c44a" }}
              />
              <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 font-poppins">
                Owethu Bank Statement Extraction (OBSE) is an advanced OCR and
                data aggregation platform designed specifically for the South
                African financial landscape. It seamlessly extracts
                comprehensive, accurate data from{" "}
                <strong className="dark:text-white">
                  any SA bank statement
                </strong>{" "}
                (individual or juristic), regardless of format – including PDF
                templates, 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-poppins font-semibold text-gold-600 dark:text-gold-400">
                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>
        </div>
      </section>

      {/* --- 4. How OBSE Works: Simple Steps, Powerful Results --- */}
      <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-14">
            <FaCogs
              className="text-5xl text-gold-500 mx-auto mb-5"
              style={{ color: "#e1c44a" }}
            />
            <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 font-poppins">
              OBSE simplifies complex data extraction into a streamlined
              workflow:
            </p>
          </div>
          {/* Process Steps - Can use a grid or timeline structure */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-8 text-center">
            {/* Step 1: Upload */}
            <div className="flex flex-col items-center p-4">
              <div className="bg-gold-500/20 p-4 rounded-full mb-4 border border-gold-500/50">
                <FaUpload
                  className="text-3xl text-gold-500"
                  style={{ color: "#e1c44a" }}
                />
              </div>
              <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
                1. Upload
              </h4>
              <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm">
                Easily upload single or multiple bank statements (PDFs).
              </p>
            </div>
            {/* Step 2: Extract */}
            <div className="flex flex-col items-center p-4">
              <div className="bg-gold-500/20 p-4 rounded-full mb-4 border border-gold-500/50">
                <FaBolt
                  className="text-3xl text-gold-500"
                  style={{ color: "#e1c44a" }}
                />
              </div>
              <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
                2. Automated Extraction
              </h4>
              <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm">
                Powerful engine reads, structures, and validates data in seconds
              </p>
            </div>
            {/* Step 3: Analyze & Check */}
            <div className="flex flex-col items-center p-4">
              <div className="bg-gold-500/20 p-4 rounded-full mb-4 border border-gold-500/50">
                <FaShieldAlt
                  className="text-3xl text-gold-500"
                  style={{ color: "#e1c44a" }}
                />
              </div>
              <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
                3. Analysis & Fraud Check
              </h4>
              <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm">
                Analyzes transactions, identifies income, flags potential fraud.
              </p>
            </div>
            {/* Step 4: Review */}
            <div className="flex flex-col items-center p-4">
              <div className="bg-gold-500/20 p-4 rounded-full mb-4 border border-gold-500/50">
                <FaEye
                  className="text-3xl text-gold-500"
                  style={{ color: "#e1c44a" }}
                />
              </div>
              <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
                4. Review & Interact (Optional)
              </h4>
              <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm">
                User-friendly interface to review, recategorize (real-time), and
                view insights.
              </p>
            </div>
            {/* Step 5: Access/Integrate */}
            <div className="flex flex-col items-center p-4">
              <div className="bg-gold-500/20 p-4 rounded-full mb-4 border border-gold-500/50">
                <FaPaperPlane
                  className="text-3xl text-gold-500"
                  style={{ color: "#e1c44a" }}
                />
              </div>
              <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
                5. Access & Integrate
              </h4>
              <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm">
                Export (Excel, PDF), use visual analytics, or integrate via API.
              </p>
            </div>
          </div>
          {/* Visual for the process flow */}
          <div className="mt-12 relative h-60 md:h-96 rounded-lg overflow-hidden shadow-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
            <Image
              src="/images/obse-process-flow.png" // Placeholder: Sequence of UI screenshots from Page 6
              alt="OBSE Process Flow Visualization"
              layout="fill"
              objectFit="contain"
              className="p-4"
            />
            <p className="absolute text-gray-500 dark:text-gray-400 z-0">
              Process Flow Visual (Replace with Image)
            </p>
          </div>
        </div>
      </section>

      {/* --- 5. Key Features: Powering Your Processes --- */}
      <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-14">
            {/* <FaListCheck
              className="text-5xl text-gold-500 mx-auto mb-5"
              style={{ color: "#e1c44a" }}
            /> */}
            <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 font-poppins">
              Explore the core capabilities that make OBSE an indispensable tool
              for modern financial analysis.
            </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="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-md transform transition duration-300 hover:-translate-y-2 hover:shadow-xl dark:hover:shadow-gold-500/20 border-t-4 border-gold-500"
                style={{ borderColor: "#e1c44a" }}
              >
                <feature.icon
                  className="text-4xl text-gold-500 mb-4" // Adjusted size
                  style={{ color: "#e1c44a" }}
                />
                <h4 className="text-xl font-semibold mb-3 font-poppins dark:text-white">
                  {feature.title}
                </h4>
                <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm leading-relaxed">
                  {feature.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* --- 6. Core Benefits: The OBSE Advantage (The Gain) --- */}
      <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-14">
            <FaThumbsUp
              className="text-5xl text-gold-500 mx-auto mb-5"
              style={{ color: "#e1c44a" }}
            />
            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
              Transform Operations & Decision-Making
            </h2>
            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto font-poppins">
              Discover the tangible benefits OBSE brings to your financial
              workflows and bottom line.
            </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-2 hover:shadow-xl dark:hover:shadow-gold-500/20"
              >
                <benefit.icon
                  className="text-4xl text-gold-500 mx-auto mb-4"
                  style={{ color: "#e1c44a" }}
                />
                <h4 className="text-xl font-semibold mb-2 font-poppins dark:text-white">
                  {benefit.title}
                </h4>
                <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm leading-relaxed">
                  {benefit.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* --- 7. Data Outputs & Insights --- */}
      <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 lg:grid-cols-2 gap-12 items-center">
            <div>
              <FaChartPie
                className="text-5xl text-gold-500 mb-4"
                style={{ color: "#e1c44a" }}
              />
              <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 font-poppins">
                OBSE delivers a suite of standard financial summaries and
                detailed data points essential for informed decisions. Gain
                clarity on:
              </p>
              <div className="space-y-4">
                {dataOutputs.map((output) => (
                  <div
                    key={output.title}
                    className="flex items-start p-3 bg-gray-50 dark:bg-gray-800 rounded-md border-l-4 border-gold-500/50"
                    style={{ borderColor: "rgba(225, 196, 74, 0.5)" }}
                  >
                    <output.icon
                      className="text-2xl text-gold-500 mt-1 mr-4 flex-shrink-0"
                      style={{ color: "#e1c44a" }}
                    />
                    <div>
                      <h4 className="font-semibold font-poppins dark:text-white">
                        {output.title}
                      </h4>
                      <p className="text-sm text-gray-600 dark:text-gray-300 font-poppins">
                        {output.description}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="relative h-80 md:h-[500px] rounded-lg overflow-hidden shadow-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
              {/* Visual: Use dashboard examples from Page 6 */}
              <Image
                src="/images/obse-dashboard-visuals.png" // Placeholder: Catalogue Page 6 Dashboards
                alt="OBSE Dashboard Examples showing financial insights"
                layout="fill"
                objectFit="contain" // Contain might be better for UI elements
                className="p-4"
              />
              <p className="absolute text-gray-500 dark:text-gray-400 z-0">
                Dashboard Visual (Replace with Image)
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* --- 8. Technology Deep Dive --- */}
      <section className="py-16 md:py-24 bg-gray-800 text-white">
        <div className="container mx-auto px-6">
          <div className="text-center mb-14">
            <FaMicrochip
              className="text-5xl text-gold-500 mx-auto mb-5"
              style={{ color: "#e1c44a" }}
            />
            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-white mb-4">
              Leveraging Advanced Technology
            </h2>
            <p className="text-md md:text-lg text-gray-300 max-w-3xl mx-auto font-poppins">
              Built on a foundation of robust and intelligent technologies for
              reliable, accurate results.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {/* OCR Engine */}
            <div className="bg-gray-700 p-6 rounded-lg text-center">
              <FaBolt
                className="text-4xl text-gold-500 mx-auto mb-3"
                style={{ color: "#e1c44a" }}
              />
              <h4 className="text-xl font-semibold mb-2 font-poppins text-white">
                Advanced OCR Engine
              </h4>
              <p className="text-gray-300 font-poppins text-sm">
                Fine-tuned for SA bank statements, handles diverse formats,
                scans, and obscured text.
              </p>
            </div>
            {/* Machine Learning */}
            <div className="bg-gray-700 p-6 rounded-lg text-center">
              <FaBrain
                className="text-4xl text-gold-500 mx-auto mb-3"
                style={{ color: "#e1c44a" }}
              />
              <h4 className="text-xl font-semibold mb-2 font-poppins text-white">
                Machine Learning
              </h4>
              <p className="text-gray-300 font-poppins text-sm">
                Continuously improves interpretation, reconciles discrepancies,
                and powers fraud detection models.
              </p>
            </div>
            {/* Data Structuring */}
            <div className="bg-gray-700 p-6 rounded-lg text-center">
              <FaTable
                className="text-4xl text-gold-500 mx-auto mb-3"
                style={{ color: "#e1c44a" }}
              />
              <h4 className="text-xl font-semibold mb-2 font-poppins text-white">
                Data Structuring & Validation
              </h4>
              <p className="text-gray-300 font-poppins text-sm">
                Intelligently structures extracted data (e.g., JSON), validates
                entries, applies rules.
              </p>
            </div>
            {/* Secure API */}
            <div className="bg-gray-700 p-6 rounded-lg text-center">
              <FaNetworkWired
                className="text-4xl text-gold-500 mx-auto mb-3"
                style={{ color: "#e1c44a" }}
              />
              <h4 className="text-xl font-semibold mb-2 font-poppins text-white">
                Secure API
              </h4>
              <p className="text-gray-300 font-poppins text-sm">
                Robust and secure API for seamless, safe integration with your
                existing systems.
              </p>
            </div>
          </div>
          {/* Visual: JSON code snippet visual from Page 5 */}
          <div className="mt-12 relative h-48 md:h-64 rounded-lg overflow-hidden shadow-lg bg-black flex items-center justify-center">
            <Image
              src="/images/obse-json-output.png" // Placeholder: Catalogue Page 5 JSON Visual
              alt="Example JSON output from OBSE data extraction"
              layout="fill"
              objectFit="contain"
              className="p-4 opacity-80"
            />
            <p className="absolute text-gray-500 z-0">
              JSON Output Example (Replace with Image)
            </p>
          </div>
        </div>
      </section>

      {/* --- 9. Use Cases & Applications --- */}
      <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-14">
            <FaBriefcase
              className="text-5xl text-gold-500 mx-auto mb-5"
              style={{ color: "#e1c44a" }}
            />
            <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 font-poppins">
              OBSE delivers value across a wide range of applications within the
              financial services sector.
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {useCases.map((useCase) => (
              <div
                key={useCase.title}
                className="bg-white dark:bg-gray-700 p-5 rounded-lg shadow-sm border-l-4 border-gold-500 flex items-center"
                style={{ borderColor: "#e1c44a" }}
              >
                <FaCheckCircle
                  className="text-gold-500 mr-3 flex-shrink-0"
                  style={{ color: "#e1c44a" }}
                />
                <span className="font-poppins dark:text-white text-sm font-medium">
                  {useCase.title}
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* --- 10. Customization & Partnership --- */}
      <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-80 rounded-lg overflow-hidden shadow-lg order-last md:order-first">
              <Image
                src="/images/partnership-handshake.jpg" // Placeholder: Image representing partnership
                alt="OMS and Client Partnership"
                layout="fill"
                objectFit="cover"
                className="transition-transform duration-500 hover:scale-105"
              />
            </div>
            <div>
              <FaUsersCog
                className="text-5xl text-gold-500 mb-4"
                style={{ color: "#e1c44a" }}
              />
              <h2 className="text-3xl md:text-4xl font-bold mb-6 font-poppins text-gray-900 dark:text-white leading-tight">
                Flexible Solutions, Tailored To You
              </h2>
              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4 font-poppins">
                While OBSE offers a comprehensive standard package, we
                understand that each organization has unique needs. If you
                require specific information or analysis not included,{" "}
                <strong className="dark:text-white">
                  we are committed to collaborating with you to develop
                  tailor-made outputs
                </strong>{" "}
                that align perfectly with your requirements.
              </p>
              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6 font-poppins">
                Our goal is to ensure OBSE meets and exceeds your expectations,
                providing the exact insights needed for your operational
                processes and decision-making.
              </p>
              {/* POC Callout */}
              <div
                className="bg-gold-50 dark:bg-gold-900/20 border-l-4 border-gold-500 p-4 rounded-md"
                style={{ borderColor: "#e1c44a" }}
              >
                <h4 className="font-semibold font-poppins text-gold-800 dark:text-gold-300">
                  Proof of Concept (POC) Available
                </h4>
                <p className="text-sm text-gold-700 dark:text-gold-400 font-poppins mt-1">
                  We offer Proof of Concept engagements to demonstrate OBSE's
                  capabilities with your specific data and workflows before full
                  commitment. Let's discuss your needs.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* --- 11. About OMS: Your Trusted Technology Partner --- */}
      <section className="py-16 md:py-24 bg-gray-100 dark:bg-gray-800">
        <div className="container mx-auto px-6 text-center">
          {/* Optional: Simple OMS logo here */}
          <Image
            src="/images/oms-logo-dark.png" // Placeholder: Dark version of logo
            alt="Owethu Management Solutions Logo"
            width={150}
            height={75}
            className="h-12 w-auto mx-auto mb-6"
          />
          <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
            Your Experienced Technology Partner
          </h2>
          <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto font-poppins mb-6">
            Owethu Management Solutions (OMS) provides professional technology
            services with a proven track record, including participation in
            ABSA's supplier development program since 2020. OBSE is backed by
            our dedicated team of IT Managers, Senior Developers, and UX
            Designers committed to robust, user-friendly solutions.
          </p>
          <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto font-poppins font-semibold">
            We focus on leveraging technology to solve real-world business
            challenges in the financial sector, emphasizing efficiency,
            accuracy, and strong partnerships.
          </p>
          <div className="mt-8">
            <Link
              href="/about-us"
              className="inline-block text-gold-600 dark:text-gold-400 font-semibold py-2 px-4 rounded-md hover:text-gold-700 dark:hover:text-gold-300 hover:bg-gold-500/10 transition-colors duration-300 font-poppins"
              style={{ color: "#c8a93d" }} // Using a slightly darker gold for text link
            >
              Learn More About OMS <FaArrowRight className="inline ml-1" />
            </Link>
          </div>
        </div>
      </section>

      {/* --- 12. Call to Action (CTA) --- */}
      <section
        className="py-16 md:py-24 bg-gradient-to-r from-gold-500 to-gold-600 text-gray-900 dark:from-gold-600 dark:to-gold-700"
        style={{ backgroundColor: "#e1c44a" }}
      >
        <div className="container mx-auto px-6 text-center">
          <FaBolt className="text-5xl mx-auto mb-5 text-gray-800" />
          <h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins text-gray-900">
            Ready to Transform Your Bank Statement Processing?
          </h2>
          <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed font-poppins text-gray-800 mb-8">
            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 gap-4">
            <Link
              href="#contact" // Link to contact form/section below
              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 font-poppins"
            >
              Request a Personalized Demo
            </Link>
            <Link
              href="/contact" // Link to general contact page
              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/10 transition-colors duration-300 font-poppins"
            >
              Contact Sales Team
            </Link>
          </div>
          {/* Optional Tertiary Link */}
          {/* <div className="mt-4">
                <a href="/path/to/obse-brochure.pdf" target="_blank" rel="noopener noreferrer" className="text-sm font-medium text-gray-700 hover:text-black font-poppins">
                    Download Brochure
                </a>
            </div> */}
        </div>
      </section>

      {/* --- 13. Contact Information --- */}
      <section
        id="contact"
        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">
            <FaPhoneAlt
              className="text-5xl text-gold-500 mx-auto mb-5"
              style={{ color: "#e1c44a" }}
            />
            <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 font-poppins">
              For personalized support or to schedule your demo, reach out to
              us. Let's harness the power of automated data extraction for your
              business.
            </p>
          </div>
          <div className="max-w-xl mx-auto text-center">
            <div className="mb-6">
              <h4 className="text-lg font-semibold font-poppins dark:text-white">
                Contact Details:
              </h4>
              <p className="text-gray-700 dark:text-gray-300 font-poppins mt-2">
                <strong className="dark:text-white">Phone:</strong>{" "}
                <a
                  href="tel:+27120513281"
                  className="text-gold-600 hover:text-gold-700 dark:text-gold-400 dark:hover:text-gold-300"
                >
                  (012) 051 3281
                </a>
              </p>
              <p className="text-gray-700 dark:text-gray-300 font-poppins mt-1">
                <strong className="dark:text-white">Email:</strong>{" "}
                <a
                  href="mailto:Zanelem@oms.africa"
                  className="text-gold-600 hover:text-gold-700 dark:text-gold-400 dark:hover:text-gold-300"
                >
                  Zanelem@oms.africa
                </a>
              </p>
            </div>

            {/* Optional: Placeholder for Contact Form */}
            {/* <div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
                <h4 className="text-lg font-semibold font-poppins dark:text-white mb-4">Or Send Us a Message</h4>
                 <p className="text-gray-600 dark:text-gray-400 font-poppins">Contact form component would go here.</p>
                 <Link href="/contact" className="mt-4 inline-block bg-gold-500 text-gray-900 font-bold py-2 px-6 rounded-md hover:bg-gold-600 transition-colors duration-300 font-poppins" style={{backgroundColor: "#e1c44a"}}>Go to Contact Form</Link>
             </div> */}
          </div>
        </div>
      </section>
    </>
  );
}