// // 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>
//     </>
//   );
// }