import React from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import Image from 'next/image';
import Link from 'next/link';
import BookingLink from '../components/BookingLink';
import PublicSiteNav from '../components/PublicSiteNav';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';
import { usePublicCoachSite } from '../components/PublicCoachSiteProvider';

const ui = {
  page: 'bg-[#fffdf9] text-[#19192d]',
  banner: 'bg-[#19192d] text-white',
  navShell: 'rounded-none bg-white ring-1 ring-[#19192d]/5',
  ink: 'text-[#19192d]',
  muted: 'text-[#5f6675]',
  accent: 'text-[#147568]',
  border: 'border-[#19192d]/10',
  surface: 'bg-white',
  darkPanel: 'bg-[#19192d] text-white',
  button: 'bg-[#147568] text-white transition hover:brightness-105',
  section: 'mx-auto max-w-7xl px-5 py-20 lg:px-8',
  card: 'rounded-none border border-[#19192d]/10 bg-white',
  overline: 'text-sm font-bold uppercase tracking-[0.28em] text-[#147568]',
  heading: 'font-serif font-semibold tracking-tight text-[#19192d]',
};

export default function Services() {
  const publicCoachSite = usePublicCoachSite();

  return (
    <>
      <Head>
        <title>{getPageTitle('Coaching Packages')}</title>
      </Head>

      <main className={`min-h-screen ${ui.page}`}>
        <div className={`${ui.banner} px-5 py-4 text-center text-lg`}>
          <p className='text-xs font-bold uppercase tracking-[0.34em]'>
            Packages and services
          </p>
          <p className='mt-2 text-xl font-medium md:text-2xl'>
            Sell coaching clearly, then manage the whole relationship in one workspace.
          </p>
        </div>

        <PublicSiteNav />

        <section className={`${ui.section} text-center`}>
          <p className={ui.overline}>Coaching offers</p>
          <h1 className={`${ui.heading} mx-auto mt-5 max-w-4xl text-5xl leading-tight md:text-6xl`}>
            Packages for leaders who need clarity, accountability, and continuity.
          </h1>
          <p className={`mx-auto mt-7 max-w-3xl text-xl leading-8 ${ui.muted}`}>
            Use these cards as starter offers. A coach can rename packages,
            change pricing, and route every CTA into the booking intake flow.
          </p>
        </section>

        <section className={`${ui.section} pt-0`}>
          <div className='grid gap-5 lg:grid-cols-3'>
            {publicCoachSite.packages.map((item) => (
              <div key={item.name} className={`${ui.card} flex flex-col p-6`}>
                <div className='border-b border-[#19192d]/10 pb-5'>
                  <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#147568]'>
                    {item.price}
                  </p>
                  <h2 className='mt-3 text-3xl font-semibold'>{item.name}</h2>
                  <p className={`mt-4 leading-7 ${ui.muted}`}>{item.copy}</p>
                </div>
                <div className='mt-5 grid gap-3'>
                  {item.items.map((included) => (
                    <div key={included} className='flex items-center gap-3'>
                      <span className='flex h-6 w-6 items-center justify-center rounded-none bg-[#147568] text-xs font-semibold text-white'>
                        ✓
                      </span>
                      <span className='font-medium'>{included}</span>
                    </div>
                  ))}
                </div>
                <BookingLink href={item.bookingPath} className={`mt-7 inline-flex justify-center rounded-none px-6 py-4 font-semibold ${ui.button}`}>
                  {item.bookingLabel}
                </BookingLink>
                <Link href={item.intakePath} className='mt-3 inline-flex justify-center rounded-none border border-[#19192d]/10 bg-white px-6 py-3 text-sm font-semibold text-[#19192d]'>
                  Send intake first
                </Link>
              </div>
            ))}
          </div>
        </section>

        <section className={`${ui.section} pt-0`}>
          <div className={`${ui.card} grid gap-8 p-7 lg:grid-cols-[0.9fr_1.1fr] lg:items-center`}>
            <div>
              <p className={ui.overline}>Expected outcomes</p>
              <h2 className={`${ui.heading} mt-4 text-4xl leading-tight md:text-5xl`}>
                Make the value of coaching concrete before the first call.
              </h2>
              <p className={`mt-5 text-lg leading-8 ${ui.muted}`}>
                FounderCoaching-style public sites make outcomes visible. This
                template connects those outcomes to the working system behind
                the scenes: clients, sessions, notes, resources, and follow-up.
              </p>
            </div>
            <div>
              <Image
                src='/images/coaching/coaching-workspace.jpg'
                alt='Coaching workspace with notes and client context'
                width={1672}
                height={941}
                sizes='(min-width: 1024px) 48vw, 100vw'
                className='mb-5 aspect-[16/9] w-full object-cover'
              />
              <div className='grid gap-3 sm:grid-cols-2'>
                {publicCoachSite.outcomes.map((item) => (
                  <div key={item} className='rounded-none bg-[#fffdf9] p-4 font-semibold'>
                    {item}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section className={`px-5 py-20 text-center ${ui.darkPanel}`}>
          <p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#147568]'>
            Next step
          </p>
          <h2 className='mx-auto mt-4 max-w-3xl font-serif text-5xl font-semibold leading-tight md:text-6xl'>
            Start with intake, then convert the lead into a client workspace.
          </h2>
          <div className='mt-8 flex justify-center'>
            <BookingLink href={publicCoachSite.calendly.assessmentUrl} className={`rounded-none px-8 py-4 font-semibold ${ui.button}`}>
              Schedule assessment
            </BookingLink>
          </div>
        </section>

        <footer className={`border-t px-5 py-10 ${ui.border}`}>
          <div className={`mx-auto flex max-w-7xl flex-col justify-between gap-5 text-sm md:flex-row ${ui.muted}`}>
            <p>
              © 2026 {publicCoachSite.workspaceName}.{' '}
              {publicCoachSite.footerLine}
            </p>
            <div className='flex gap-5'>
              {publicCoachSite.contactEmail && <a href={`mailto:${publicCoachSite.contactEmail}`}>Contact</a>}
              <Link href='/privacy-policy/'>Privacy Policy</Link>
              <Link href='/terms-of-use/'>Terms of Use</Link>
              <Link href='/login/'>Login</Link>
            </div>
          </div>
        </footer>
      </main>
    </>
  );
}

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