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 { publicCoachSite } from '../coachingSite';

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-[#72798a]',
  accent: 'text-[#35b7a5]',
  border: 'border-[#19192d]/10',
  surface: 'bg-white',
  softSurface: 'bg-[#fffdf9]',
  darkPanel: 'bg-[#19192d] text-white',
  button: 'bg-[#35b7a5] 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-[#35b7a5]',
  heading: 'font-serif font-semibold tracking-tight text-[#19192d]',
};

export default function AboutCoach() {
  return (
    <>
      <Head>
        <title>{getPageTitle('About Coach')}</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]'>
            Coaching practice
          </p>
          <p className='mt-2 text-xl font-medium md:text-2xl'>
            A public coach profile connected to a private client workspace.
          </p>
        </div>

        <PublicSiteNav />

        <section className={`${ui.section} grid gap-12 lg:grid-cols-[0.9fr_1.1fr] lg:items-center`}>
          <div>
            <p className={ui.overline}>About the coach</p>
            <h1 className={`${ui.heading} mt-5 text-5xl leading-tight md:text-6xl`}>
              {publicCoachSite.coach.aboutHeadline}
            </h1>
            <p className={`mt-7 text-xl leading-8 ${ui.muted}`}>
              {publicCoachSite.coach.aboutIntro}
            </p>
            <div className='mt-9 flex flex-wrap gap-3'>
              <BookingLink href={publicCoachSite.calendly.assessmentUrl} className={`rounded-none px-7 py-4 font-semibold ${ui.button}`}>
                Schedule assessment
              </BookingLink>
              <Link href={publicCoachSite.assessmentPath} className='rounded-none border border-[#19192d]/10 bg-white px-7 py-4 font-semibold text-[#19192d]'>
                Send intake
              </Link>
              <Link
                href='/services/'
                className='rounded-none border border-[#19192d]/10 bg-white px-7 py-4 font-semibold text-[#19192d]'
              >
                View packages
              </Link>
            </div>
          </div>

          <div className={`${ui.card} p-6`}>
            <Image
              src='/images/coaching/coach-portrait.jpg'
              alt='Executive coach portrait'
              width={1122}
              height={1402}
              sizes='(min-width: 1024px) 45vw, 100vw'
              className='mb-6 aspect-[4/5] w-full object-cover'
            />
            <div className='border-b border-[#19192d]/10 pb-5'>
              <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#35b7a5]'>
                Coach profile
              </p>
              <h2 className='mt-3 text-3xl font-semibold'>
                {publicCoachSite.coach.name}
              </h2>
              <p className={`mt-2 text-lg ${ui.muted}`}>
                {publicCoachSite.coach.title}
              </p>
            </div>
            <div className='mt-6 grid gap-3'>
              {publicCoachSite.coach.credentials.map((item) => (
                <div key={item} className='flex items-center gap-3 rounded-none bg-[#fffdf9] p-4'>
                  <span className='flex h-7 w-7 items-center justify-center rounded-none bg-[#35b7a5] text-sm font-semibold text-white'>
                    ✓
                  </span>
                  <span className='font-medium'>{item}</span>
                </div>
              ))}
            </div>
            <div className='mt-6 border-t border-[#19192d]/10 pt-5'>
              <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#35b7a5]'>
                Connect
              </p>
              <div className='mt-4 flex flex-wrap gap-3'>
                {publicCoachSite.socialLinks.map((item) => (
                  <a
                    key={item.label}
                    href={item.href}
                    className='rounded-none border border-[#19192d]/10 bg-white px-4 py-2 text-sm font-semibold text-[#19192d] transition hover:border-[#35b7a5]'
                    target='_blank'
                    rel='noreferrer'
                  >
                    {item.label}
                  </a>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section className={`${ui.section} pt-0`}>
          <div className='grid gap-5 md:grid-cols-3'>
            {publicCoachSite.principles.map(([title, copy]) => (
              <div key={title} className={`${ui.card} p-6`}>
                <p className='text-xs font-semibold uppercase tracking-[0.22em] text-[#35b7a5]'>
                  Principle
                </p>
                <h3 className='mt-3 text-2xl font-semibold'>{title}</h3>
                <p className={`mt-4 leading-7 ${ui.muted}`}>{copy}</p>
              </div>
            ))}
          </div>
        </section>

        <section className={`px-5 py-20 text-center ${ui.darkPanel}`}>
          <p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#35b7a5]'>
            Ready to talk?
          </p>
          <h2 className='mx-auto mt-4 max-w-3xl font-serif text-5xl font-semibold leading-tight md:text-6xl'>
            Start with an assessment and bring context into the first call.
          </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'>
              <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>
    </>
  );
}

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