
import React, { useEffect, useState } from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import BaseButton from '../components/BaseButton';
import CardBox from '../components/CardBox';
import SectionFullScreen from '../components/SectionFullScreen';
import LayoutGuest from '../layouts/Guest';
import BaseDivider from '../components/BaseDivider';
import BaseButtons from '../components/BaseButtons';
import { getPageTitle } from '../config';
import { useAppSelector } from '../stores/hooks';
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
import * as icon from '@mdi/js';
import BaseIcon from '../components/BaseIcon';


export default function Starter() {
    const textColor = useAppSelector((state) => state.style.linkColor);

    const title = 'CFO.ai'

  return (
    <div className="bg-white dark:bg-dark-900 text-gray-900 dark:text-gray-100 min-h-screen font-sans">
      <Head>
        <title>{getPageTitle('Intelligent Financial Advisor for SMBs')}</title>
      </Head>

      {/* Navigation Header */}
      <header className="flex items-center justify-between px-6 py-4 border-b border-gray-100 dark:border-dark-800">
        <div className="flex items-center space-x-2">
            <div className="bg-blue-600 p-2 rounded-lg">
                <BaseIcon path={icon.mdiRobotOutline} size={24} className="text-white" />
            </div>
            <span className="text-xl font-bold tracking-tight">CFO.ai</span>
        </div>
        <nav className="hidden md:flex space-x-8 text-sm font-medium">
            <a href="#features" className="hover:text-blue-600 transition-colors">Features</a>
            <a href="#about" className="hover:text-blue-600 transition-colors">About</a>
        </nav>
        <div className="flex items-center space-x-4">
            <Link href="/login" className="text-sm font-semibold hover:text-blue-600">Log in</Link>
            <BaseButton href="/register" label="Get Started" color="info" roundedFull className="px-6" />
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-20 px-6 max-w-7xl mx-auto text-center">
        <div className="inline-block px-4 py-1.5 mb-6 text-sm font-semibold tracking-wide text-blue-600 uppercase bg-blue-50 rounded-full dark:bg-blue-900/20 dark:text-blue-400">
            Meet your new Financial Partner
        </div>
        <h1 className="text-5xl md:text-7xl font-extrabold mb-8 tracking-tight">
            The AI CFO for <span className="text-blue-600">SMBs.</span>
        </h1>
        <p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-12 leading-relaxed">
            CFO.ai interprets your financial data, detects abnormalities, and advises you like a seasoned executive. Stop guessing, start growing.
        </p>
        <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-6">
            <BaseButton href="/advisor" label="Open Advisor Dashboard" color="info" roundedFull className="px-10 py-4 text-lg" />
            <Link href="#features" className="text-lg font-semibold flex items-center group hover:text-blue-600 transition-colors">
                How it works <BaseIcon path={icon.mdiArrowRight} size={20} className="ml-2 transform group-hover:translate-x-1 transition-transform" />
            </Link>
        </div>
        
        {/* Mock Dashboard Preview */}
        <div className="mt-20 relative rounded-2xl overflow-hidden border border-gray-200 dark:border-dark-700 shadow-2xl max-w-5xl mx-auto">
            <div className="bg-gray-50 dark:bg-dark-800 p-4 border-b border-gray-200 dark:border-dark-700 flex space-x-2">
                <div className="w-3 h-3 rounded-full bg-red-400"></div>
                <div className="w-3 h-3 rounded-full bg-yellow-400"></div>
                <div className="w-3 h-3 rounded-full bg-green-400"></div>
            </div>
            <div className="bg-white dark:bg-dark-900 p-8 h-[400px] flex items-center justify-center text-gray-400 italic">
                <div className="text-center">
                    <BaseIcon path={icon.mdiChartTimelineVariant} size={64} className="mx-auto mb-4 opacity-20" />
                    <p>Real-time Financial Insights & AI Advisory</p>
                </div>
            </div>
        </div>
      </section>

      {/* Features Grid */}
      <section id="features" className="py-20 bg-gray-50 dark:bg-dark-800/50">
        <div className="max-w-7xl mx-auto px-6">
            <div className="text-center mb-16">
                <h2 className="text-3xl font-bold mb-4">Everything you need from a CFO</h2>
                <p className="text-gray-600 dark:text-gray-400">Automated, intelligent, and available 24/7.</p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
                <div className="p-8 bg-white dark:bg-dark-900 rounded-2xl shadow-sm border border-gray-100 dark:border-dark-700">
                    <div className="bg-blue-100 dark:bg-blue-900/20 p-3 rounded-xl inline-block mb-6 text-blue-600">
                        <BaseIcon path={icon.mdiGauge} size={32} />
                    </div>
                    <h3 className="text-xl font-bold mb-3">Real-time Runway</h3>
                    <p className="text-gray-600 dark:text-gray-400">Always know exactly how many months of cash you have left based on actual spending.</p>
                </div>
                <div className="p-8 bg-white dark:bg-dark-900 rounded-2xl shadow-sm border border-gray-100 dark:border-dark-700">
                    <div className="bg-emerald-100 dark:bg-emerald-900/20 p-3 rounded-xl inline-block mb-6 text-emerald-600">
                        <BaseIcon path={icon.mdiAlertOctagon} size={32} />
                    </div>
                    <h3 className="text-xl font-bold mb-3">Anomaly Detection</h3>
                    <p className="text-gray-600 dark:text-gray-400">Get notified the moment something unusual happens—unrecognized charges or spikes in burn.</p>
                </div>
                <div className="p-8 bg-white dark:bg-dark-900 rounded-2xl shadow-sm border border-gray-100 dark:border-dark-700">
                    <div className="bg-violet-100 dark:bg-violet-900/20 p-3 rounded-xl inline-block mb-6 text-violet-600">
                        <BaseIcon path={icon.mdiChatProcessing} size={32} />
                    </div>
                    <h3 className="text-xl font-bold mb-3">Ask Your CFO</h3>
                    <p className="text-gray-600 dark:text-gray-400">Chat with an AI that knows your numbers. Ask &quot;Can we afford another hire?&quot; and get a data-backed answer.</p>
                </div>
            </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 border-t border-gray-100 dark:border-dark-800 text-center text-gray-500 text-sm">
        <p>© 2026 {title}. Built for SMBs who want to scale smart.</p>
        <div className="mt-4 flex justify-center space-x-6">
            <Link href="/privacy-policy" className="hover:text-blue-600">Privacy Policy</Link>
            <Link href="/terms-of-use" className="hover:text-blue-600">Terms of Use</Link>
        </div>
      </footer>
    </div>
  );
}

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

