import React from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import BaseButton from '../components/BaseButton';
import CardBox from '../components/CardBox';
import SectionFullScreen from '../components/SectionFullScreen';
import LayoutGuest from '../layouts/Guest';
import BaseButtons from '../components/BaseButtons';
import { getPageTitle } from '../config';
import CardBoxComponentTitle from '../components/CardBoxComponentTitle';

export default function Starter() {
  const title = 'Shimahara Visual';

  return (
    <div
      style={{
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <Head>
        <title>{getPageTitle('Welcome')}</title>
      </Head>

      <SectionFullScreen bg='violet'>
        <div className='flex items-center justify-center flex-col space-y-4 w-full'>
          <CardBox className='w-full md:w-3/5 lg:w-2/3'>
            <CardBoxComponentTitle title='Welcome to Shimahara Visual!' />
            <div className='space-y-3'>
              <p className='text-center text-gray-500'>
                The SaaS platform to design, manage, and publish offline-ready
                interactive tours for physical venues.
              </p>
            </div>
            <BaseButtons className='justify-center mt-6'>
              <BaseButton
                href='/login'
                label='Sign In'
                color='info'
                className='w-40'
              />
              <BaseButton
                href='/projects/projects-list'
                label='Admin Console'
                color='success'
                className='w-40'
              />
            </BaseButtons>
          </CardBox>
        </div>
      </SectionFullScreen>
      <div className='bg-black text-white flex flex-col text-center justify-center'>
        <p className='py-6 text-sm'>© 2026 {title}. All rights reserved</p>
      </div>
    </div>
  );
}

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