import {
  mdiArrowTopRight,
  mdiCheckCircleOutline,
  mdiHeartPulse,
  mdiLeafCircle,
  mdiTargetVariant,
  mdiTrophyOutline,
  mdiWaterOutline,
  mdiWeatherNight,
} from '@mdi/js';
import Head from 'next/head';
import Link from 'next/link';
import type { ReactElement } from 'react';
import BaseIcon from '../components/BaseIcon';
import { getPageTitle } from '../config';
import LayoutGuest from '../layouts/Guest';

const promiseCards = [
  {
    title: 'Daily Pulse check-ins',
    description: 'Save water, mood, sleep, and weight in one elegant flow that already connects to the app’s deeper record screens.',
    icon: mdiHeartPulse,
  },
  {
    title: 'Premium daily ring',
    description: 'Get a calm summary of what has been captured today, with a clear score that encourages consistency without overwhelm.',
    icon: mdiTrophyOutline,
  },
  {
    title: 'Goals in context',
    description: 'Keep active goals visible beside today’s inputs so actions feel connected to long-term outcomes.',
    icon: mdiTargetVariant,
  },
];

const featureChips = [
  'Fitness',
  'Nutrition',
  'Medical',
  'Mental Wellness',
  'Sleep',
  'Hydration',
  'Longevity',
  'Family & Teams',
  'Health Vault',
  'Reports & Exports',
];

const workflowSteps = [
  {
    step: '01',
    title: 'Capture your essentials',
    description: 'Log hydration, mood, sleep, and weight from one mobile-first workspace.',
    icon: mdiWaterOutline,
  },
  {
    step: '02',
    title: 'See your score instantly',
    description: 'The Daily Pulse ring turns raw logging into a clear signal for the day.',
    icon: mdiCheckCircleOutline,
  },
  {
    step: '03',
    title: 'Drill into full records',
    description: 'Jump directly into detailed CRUD screens for trends, edits, exports, and history.',
    icon: mdiArrowTopRight,
  },
];

export default function Starter() {
  return (
    <>
      <Head>
        <title>{getPageTitle('APEX BRAIN')}</title>
      </Head>

      <div style={{ backgroundColor: '#F5F0E8', color: '#1C1C1C' }}>
        <header className="relative overflow-hidden border-b" style={{ borderColor: '#E1D6C5' }}>
          <div
            className="absolute inset-x-0 top-0 h-[28rem]"
            style={{
              background:
                'radial-gradient(circle at top left, rgba(201,168,76,0.18) 0%, rgba(201,168,76,0) 48%), radial-gradient(circle at top right, rgba(74,103,65,0.16) 0%, rgba(74,103,65,0) 44%)',
            }}
          />
          <div className="relative mx-auto max-w-7xl px-6 py-6 lg:px-10">
            <nav className="flex flex-wrap items-center justify-between gap-4">
              <Link href="/" className="inline-flex items-center gap-3 text-lg font-semibold tracking-[0.08em]" style={{ color: '#1C1C1C' }}>
                <span
                  className="flex h-12 w-12 items-center justify-center rounded-2xl"
                  style={{ backgroundColor: '#4A6741', color: '#F5F0E8' }}
                >
                  <BaseIcon path={mdiTrophyOutline} size={24} />
                </span>
                APEX BRAIN
              </Link>

              <div className="flex flex-wrap items-center gap-3 text-sm font-semibold">
                <Link href="/daily-pulse" className="rounded-full border px-4 py-2 transition hover:-translate-y-0.5" style={{ borderColor: '#D6C8B4', color: '#4A6741' }}>
                  Daily Pulse
                </Link>
                <Link href="/onboarding" className="rounded-full border px-4 py-2 transition hover:-translate-y-0.5" style={{ borderColor: '#D6C8B4', color: '#4A6741' }}>
                  Onboarding
                </Link>
                <Link href="/dashboard" className="rounded-full border px-4 py-2 transition hover:-translate-y-0.5" style={{ borderColor: '#D6C8B4', color: '#4A6741' }}>
                  Dashboard
                </Link>
                <Link href="/login" className="rounded-full px-4 py-2 text-white transition hover:-translate-y-0.5" style={{ backgroundColor: '#4A6741' }}>
                  Login
                </Link>
              </div>
            </nav>

            <div className="grid gap-12 pb-14 pt-12 lg:grid-cols-[1.1fr_0.9fr] lg:items-center lg:pb-20 lg:pt-20">
              <div>
                <div
                  className="mb-5 inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-semibold"
                  style={{ borderColor: '#D6C8B4', color: '#4A6741', backgroundColor: 'rgba(255,255,255,0.56)' }}
                >
                  <BaseIcon path={mdiLeafCircle} size={18} />
                  Your Complete Health Operating System
                </div>
                <h1 className="max-w-3xl text-5xl font-semibold tracking-tight md:text-6xl" style={{ color: '#1C1C1C' }}>
                  The warm, premium wellness home for your entire life.
                </h1>
                <p className="mt-6 max-w-2xl text-lg leading-8" style={{ color: '#4C5544' }}>
                  APEX BRAIN brings health, fitness, medical tracking, habits, sleep, hydration, and longevity into one calm, trustworthy experience — with a polished first slice you can use right now.
                </p>

                <div className="mt-8 flex flex-wrap items-center gap-4">
                  <Link
                    href="/register"
                    className="inline-flex items-center justify-center rounded-full px-6 py-3 text-sm font-semibold text-white transition hover:-translate-y-0.5"
                    style={{ backgroundColor: '#4A6741' }}
                  >
                    Create My Profile
                  </Link>
                  <Link
                    href="/login"
                    className="inline-flex items-center justify-center rounded-full border px-6 py-3 text-sm font-semibold transition hover:-translate-y-0.5"
                    style={{ borderColor: '#D6C8B4', color: '#4A6741', backgroundColor: 'rgba(255,255,255,0.66)' }}
                  >
                    I Already Have an Account
                  </Link>
                  <Link href="/onboarding" className="text-sm font-semibold" style={{ color: '#4A6741' }}>
                    Continue guided onboarding →
                  </Link>
                </div>

                <div className="mt-10 grid gap-4 sm:grid-cols-3">
                  <div className="rounded-[24px] border p-4" style={{ borderColor: '#E1D6C5', backgroundColor: 'rgba(255,255,255,0.72)' }}>
                    <div className="text-xs font-semibold uppercase tracking-[0.18em]" style={{ color: '#7E725E' }}>
                      Aesthetics
                    </div>
                    <p className="mt-3 text-sm leading-6" style={{ color: '#4C5544' }}>
                      Cream backgrounds, forest green accents, and soft gold highlights for a grounded, luxury feel.
                    </p>
                  </div>
                  <div className="rounded-[24px] border p-4" style={{ borderColor: '#E1D6C5', backgroundColor: 'rgba(255,255,255,0.72)' }}>
                    <div className="text-xs font-semibold uppercase tracking-[0.18em]" style={{ color: '#7E725E' }}>
                      Mobile-first
                    </div>
                    <p className="mt-3 text-sm leading-6" style={{ color: '#4C5544' }}>
                      Designed to feel just as refined on iPhone, Android, and desktop screens.
                    </p>
                  </div>
                  <div className="rounded-[24px] border p-4" style={{ borderColor: '#E1D6C5', backgroundColor: 'rgba(255,255,255,0.72)' }}>
                    <div className="text-xs font-semibold uppercase tracking-[0.18em]" style={{ color: '#7E725E' }}>
                      First live slice
                    </div>
                    <p className="mt-3 text-sm leading-6" style={{ color: '#4C5544' }}>
                      Daily Pulse is implemented now as the first real workflow, not just a mockup.
                    </p>
                  </div>
                </div>
              </div>

              <div className="lg:justify-self-end">
                <div className="mx-auto max-w-md rounded-[34px] border p-4 shadow-[0_30px_80px_rgba(74,103,65,0.12)]" style={{ borderColor: '#D8CBB7', backgroundColor: 'rgba(255,255,255,0.7)' }}>
                  <div className="rounded-[30px] border p-5" style={{ borderColor: '#E1D6C5', backgroundColor: '#FFF9F0' }}>
                    <div className="flex items-center justify-between">
                      <div>
                        <div className="text-xs font-semibold uppercase tracking-[0.18em]" style={{ color: '#7E725E' }}>
                          Daily Pulse preview
                        </div>
                        <div className="mt-2 text-2xl font-semibold" style={{ color: '#1C1C1C' }}>
                          75 / 100 today
                        </div>
                      </div>
                      <span className="rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em]" style={{ backgroundColor: 'rgba(74,103,65,0.12)', color: '#2F5A35' }}>
                        live now
                      </span>
                    </div>

                    <div className="mt-6 grid gap-3 sm:grid-cols-2">
                      <div className="rounded-[22px] border p-4" style={{ borderColor: '#E5DAC9', backgroundColor: 'rgba(255,255,255,0.72)' }}>
                        <div className="flex items-center gap-2 text-sm font-semibold" style={{ color: '#4A6741' }}>
                          <BaseIcon path={mdiWaterOutline} size={20} />
                          Hydration
                        </div>
                        <div className="mt-3 text-2xl font-semibold">1,250 ml</div>
                        <p className="mt-2 text-sm" style={{ color: '#6A6A55' }}>2 entries captured today</p>
                      </div>
                      <div className="rounded-[22px] border p-4" style={{ borderColor: '#E5DAC9', backgroundColor: 'rgba(255,255,255,0.72)' }}>
                        <div className="flex items-center gap-2 text-sm font-semibold" style={{ color: '#4A6741' }}>
                          <BaseIcon path={mdiWeatherNight} size={20} />
                          Sleep
                        </div>
                        <div className="mt-3 text-2xl font-semibold">7h 38m</div>
                        <p className="mt-2 text-sm" style={{ color: '#6A6A55' }}>Quality 8 / 10</p>
                      </div>
                      <div className="rounded-[22px] border p-4" style={{ borderColor: '#E5DAC9', backgroundColor: 'rgba(255,255,255,0.72)' }}>
                        <div className="flex items-center gap-2 text-sm font-semibold" style={{ color: '#4A6741' }}>
                          <BaseIcon path={mdiHeartPulse} size={20} />
                          Mood
                        </div>
                        <div className="mt-3 text-2xl font-semibold">8 / 10</div>
                        <p className="mt-2 text-sm" style={{ color: '#6A6A55' }}>Calm • Focused • Optimistic</p>
                      </div>
                      <div className="rounded-[22px] border p-4" style={{ borderColor: '#E5DAC9', backgroundColor: 'rgba(255,255,255,0.72)' }}>
                        <div className="flex items-center gap-2 text-sm font-semibold" style={{ color: '#4A6741' }}>
                          <BaseIcon path={mdiTargetVariant} size={20} />
                          Goal focus
                        </div>
                        <div className="mt-3 text-lg font-semibold">Build better daily habits</div>
                        <p className="mt-2 text-sm" style={{ color: '#6A6A55' }}>One ritual connected to the rest of the app.</p>
                      </div>
                    </div>

                    <Link href="/daily-pulse" className="mt-5 inline-flex items-center gap-2 text-sm font-semibold" style={{ color: '#4A6741' }}>
                      Open the Daily Pulse slice
                      <BaseIcon path={mdiArrowTopRight} size={18} />
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </header>

        <main>
          <section className="mx-auto max-w-7xl px-6 py-16 lg:px-10 lg:py-20">
            <div className="max-w-3xl">
              <div className="text-sm font-semibold uppercase tracking-[0.2em]" style={{ color: '#7E725E' }}>
                FIRST DELIVERY
              </div>
              <h2 className="mt-4 text-4xl font-semibold tracking-tight" style={{ color: '#1C1C1C' }}>
                A complete first win, not just a landing page.
              </h2>
              <p className="mt-4 text-lg leading-8" style={{ color: '#4C5544' }}>
                The initial APEX BRAIN experience is centered around a premium Daily Pulse workflow: create inputs, see a summary ring, review recent activity, and jump into full detail screens.
              </p>
            </div>

            <div className="mt-10 grid gap-5 lg:grid-cols-3">
              {promiseCards.map((card) => (
                <div key={card.title} className="rounded-[28px] border p-6 shadow-sm" style={{ borderColor: '#E1D6C5', backgroundColor: '#FFF9F0' }}>
                  <div className="flex h-14 w-14 items-center justify-center rounded-2xl" style={{ backgroundColor: '#F1E7D8', color: '#4A6741' }}>
                    <BaseIcon path={card.icon} size={26} />
                  </div>
                  <h3 className="mt-5 text-xl font-semibold" style={{ color: '#1C1C1C' }}>
                    {card.title}
                  </h3>
                  <p className="mt-3 text-sm leading-7" style={{ color: '#4C5544' }}>
                    {card.description}
                  </p>
                </div>
              ))}
            </div>
          </section>

          <section className="border-y" style={{ borderColor: '#E1D6C5', backgroundColor: '#EFE6DB' }}>
            <div className="mx-auto max-w-7xl px-6 py-16 lg:px-10 lg:py-20">
              <div className="grid gap-10 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
                <div>
                  <div className="text-sm font-semibold uppercase tracking-[0.2em]" style={{ color: '#7E725E' }}>
                    How the slice works
                  </div>
                  <h2 className="mt-4 text-4xl font-semibold tracking-tight" style={{ color: '#1C1C1C' }}>
                    One calm ritual that already feels like a real health product.
                  </h2>
                  <p className="mt-4 text-lg leading-8" style={{ color: '#4C5544' }}>
                    Instead of scattering the experience across dozens of unfinished screens, the first release centers attention on the one journey users repeat every day.
                  </p>
                </div>

                <div className="grid gap-4 md:grid-cols-3">
                  {workflowSteps.map((item) => (
                    <div key={item.step} className="rounded-[28px] border p-5" style={{ borderColor: '#D6C8B4', backgroundColor: '#FFF9F0' }}>
                      <div className="flex items-center justify-between">
                        <div className="text-sm font-semibold uppercase tracking-[0.18em]" style={{ color: '#7E725E' }}>
                          {item.step}
                        </div>
                        <div className="flex h-10 w-10 items-center justify-center rounded-2xl" style={{ backgroundColor: '#F1E7D8', color: '#4A6741' }}>
                          <BaseIcon path={item.icon} size={20} />
                        </div>
                      </div>
                      <h3 className="mt-5 text-lg font-semibold" style={{ color: '#1C1C1C' }}>
                        {item.title}
                      </h3>
                      <p className="mt-3 text-sm leading-7" style={{ color: '#4C5544' }}>
                        {item.description}
                      </p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </section>

          <section className="mx-auto max-w-7xl px-6 py-16 lg:px-10 lg:py-20">
            <div className="max-w-3xl">
              <div className="text-sm font-semibold uppercase tracking-[0.2em]" style={{ color: '#7E725E' }}>
                What comes next
              </div>
              <h2 className="mt-4 text-4xl font-semibold tracking-tight" style={{ color: '#1C1C1C' }}>
                The foundation is designed to expand into the full APEX BRAIN vision.
              </h2>
              <p className="mt-4 text-lg leading-8" style={{ color: '#4C5544' }}>
                The app already has the building blocks for a much broader health platform. Daily Pulse is the first polished slice that can grow into the complete ecosystem below.
              </p>
            </div>

            <div className="mt-8 flex flex-wrap gap-3">
              {featureChips.map((chip) => (
                <span key={chip} className="rounded-full border px-4 py-2 text-sm font-semibold" style={{ borderColor: '#D6C8B4', color: '#4A6741', backgroundColor: '#FFF9F0' }}>
                  {chip}
                </span>
              ))}
            </div>

            <div className="mt-10 rounded-[32px] border p-8" style={{ borderColor: '#D8CBB7', backgroundColor: '#FFF9F0' }}>
              <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
                <div>
                  <div className="text-sm font-semibold uppercase tracking-[0.2em]" style={{ color: '#7E725E' }}>
                    Ready to continue?
                  </div>
                  <h3 className="mt-3 text-3xl font-semibold" style={{ color: '#1C1C1C' }}>
                    Start with the branded slice, then tell us which area should expand next.
                  </h3>
                  <p className="mt-3 max-w-2xl text-base leading-7" style={{ color: '#4C5544' }}>
                    You can create an account, start the guided onboarding flow, sign in to the admin interface, or go straight to Daily Pulse once your setup feels right.
                  </p>
                </div>
                <div className="flex flex-wrap gap-3">
                  <Link
                    href="/onboarding"
                    className="inline-flex items-center justify-center rounded-full px-6 py-3 text-sm font-semibold text-white transition hover:-translate-y-0.5"
                    style={{ backgroundColor: '#4A6741' }}
                  >
                    Start onboarding
                  </Link>
                  <Link
                    href="/daily-pulse"
                    className="inline-flex items-center justify-center rounded-full border px-6 py-3 text-sm font-semibold transition hover:-translate-y-0.5"
                    style={{ borderColor: '#D6C8B4', color: '#4A6741' }}
                  >
                    Open Daily Pulse
                  </Link>
                  <Link
                    href="/login"
                    className="inline-flex items-center justify-center rounded-full border px-6 py-3 text-sm font-semibold transition hover:-translate-y-0.5"
                    style={{ borderColor: '#D6C8B4', color: '#4A6741' }}
                  >
                    Admin Login
                  </Link>
                </div>
              </div>
            </div>
          </section>
        </main>

        <footer className="border-t" style={{ borderColor: '#E1D6C5' }}>
          <div className="mx-auto flex max-w-7xl flex-col gap-3 px-6 py-6 text-sm lg:flex-row lg:items-center lg:justify-between lg:px-10" style={{ color: '#6A6A55' }}>
            <p>© 2026 APEX BRAIN. Calm, premium health management in one place.</p>
            <div className="flex flex-wrap items-center gap-4 font-semibold">
              <Link href="/register" style={{ color: '#4A6741' }}>
                Create profile
              </Link>
              <Link href="/login" style={{ color: '#4A6741' }}>
                Login
              </Link>
              <Link href="/onboarding" style={{ color: '#4A6741' }}>
                Onboarding
              </Link>
              <Link href="/dashboard" style={{ color: '#4A6741' }}>
                Dashboard
              </Link>
            </div>
          </div>
        </footer>
      </div>
    </>
  );
}

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