import React from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import BaseButton from '../components/BaseButton';
import LayoutGuest from '../layouts/Guest';
import SectionMain from '../components/SectionMain';
import { getPageTitle } from '../config';
import * as icon from '@mdi/js';
import BaseIcon from '../components/BaseIcon';

export default function SmartHisabLanding() {
  const title = 'SmartHisab';

  return (
    <div className="bg-gray-50 min-h-screen font-sans">
      <Head>
        <title>{getPageTitle('Ethiopia\'s #1 Financial Automation for Merchants & Accountants')}</title>
      </Head>

      {/* Hero Section */}
      <header className="bg-white border-b sticky top-0 z-50">
        <nav className="container mx-auto px-6 py-4 flex justify-between items-center">
          <div className="flex items-center space-x-2">
            <div className="bg-blue-600 p-2 rounded-lg">
              <BaseIcon path={icon.mdiChartLine} className="text-white" size={24} />
            </div>
            <span className="text-2xl font-bold text-blue-900 tracking-tight">{title}</span>
          </div>
          <div className="space-x-4">
            <Link href="/login" className="text-gray-600 hover:text-blue-600 font-medium">Login</Link>
            <BaseButton
              href="/register"
              label="Join as Merchant"
              color="info"
              className="hidden md:inline-flex"
            />
          </div>
        </nav>
      </header>

      <section className="relative bg-blue-900 text-white py-24 overflow-hidden">
        <div className="container mx-auto px-6 relative z-10 flex flex-col md:flex-row items-center">
          <div className="md:w-1/2 mb-12 md:mb-0">
            <h1 className="text-4xl md:text-6xl font-extrabold leading-tight mb-6">
              Transform Your <span className="text-emerald-400">Financial Workflow</span> in Ethiopia.
            </h1>
            <p className="text-xl text-blue-100 mb-8 max-w-lg">
              SmartHisab connects Merchants and Accountants seamlessly. Automated records, OCR-powered receipts, and instant VAT/TOT declarations.
            </p>
            <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
              <BaseButton label="Get Started Free" color="info" href="/register" className="px-8 py-4 text-lg" />
              <BaseButton label="Book a Demo" outline color="info" className="px-8 py-4 text-lg border-white text-white hover:bg-white hover:text-blue-900" />
            </div>
          </div>
          <div className="md:w-1/2 flex justify-center">
             <div className="bg-white/10 backdrop-blur-md p-8 rounded-2xl border border-white/20 shadow-2xl">
                <div className="bg-white p-4 rounded-xl shadow-lg mb-4 text-blue-900">
                   <div className="flex justify-between items-center mb-4">
                      <span className="font-bold text-sm uppercase tracking-wider opacity-60">Live Receipt Scan</span>
                      <div className="bg-emerald-100 text-emerald-600 px-2 py-1 rounded text-xs font-bold">98% Accuracy</div>
                   </div>
                   <div className="space-y-3">
                      <div className="h-4 bg-gray-100 rounded w-3/4 animate-pulse"></div>
                      <div className="h-4 bg-gray-100 rounded w-1/2 animate-pulse"></div>
                      <div className="grid grid-cols-2 gap-4">
                         <div className="h-10 bg-blue-50 rounded border border-blue-100 flex items-center px-3 text-xs">Total: 1,450.50 ETB</div>
                         <div className="h-10 bg-blue-50 rounded border border-blue-100 flex items-center px-3 text-xs">Tax: 189.20 ETB</div>
                      </div>
                   </div>
                </div>
                <div className="text-center text-sm font-medium">Auto-extracted via AI OCR</div>
             </div>
          </div>
        </div>
        <div className="absolute top-0 right-0 w-1/2 h-full bg-emerald-500/10 skew-x-12 transform translate-x-1/2"></div>
      </section>

      {/* Problem/Solution Section */}
      <SectionMain>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-12 py-12">
          <div className="text-center">
            <div className="bg-blue-100 text-blue-600 w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6">
              <BaseIcon path={icon.mdiCamera} size={32} />
            </div>
            <h3 className="text-xl font-bold mb-4 text-gray-800">For Merchants</h3>
            <p className="text-gray-600">Capture receipts via mobile, track daily sales, and stay compliant with zero effort.</p>
          </div>
          <div className="text-center">
            <div className="bg-emerald-100 text-emerald-600 w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6">
              <BaseIcon path={icon.mdiAccountTie} size={32} />
            </div>
            <h3 className="text-xl font-bold mb-4 text-gray-800">For Accountants</h3>
            <p className="text-gray-600">Eliminate data cleaning. Receive structured data from all clients in one unified dashboard.</p>
          </div>
          <div className="text-center">
            <div className="bg-purple-100 text-purple-600 w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6">
              <BaseIcon path={icon.mdiFileCheck} size={32} />
            </div>
            <h3 className="text-xl font-bold mb-4 text-gray-800">Tax Ready</h3>
            <p className="text-gray-600">One-click generation of VAT, TOT, and Income Tax reports compatible with Revenue Office formats.</p>
          </div>
        </div>
      </SectionMain>

      {/* Footer */}
      <footer className="bg-blue-900 text-white py-12">
        <div className="container mx-auto px-6 text-center">
          <div className="flex items-center justify-center space-x-2 mb-8">
            <div className="bg-white p-2 rounded-lg">
              <BaseIcon path={icon.mdiChartLine} className="text-blue-900" size={24} />
            </div>
            <span className="text-2xl font-bold tracking-tight">{title}</span>
          </div>
          <p className="text-blue-200 mb-8 max-w-xl mx-auto">
            Digitizing the backbone of Ethiopia&apos;s economy. Empowering merchants, simplifying accounting.
          </p>
          <div className="border-t border-blue-800 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-blue-300">
            <p>© 2026 {title}. Built for Ethiopia.</p>
            <div className="flex space-x-6 mt-4 md:mt-0">
              <Link href="/privacy-policy" className="hover:text-white">Privacy Policy</Link>
              <Link href="/terms-of-use" className="hover:text-white">Terms of Service</Link>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}

SmartHisabLanding.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};
