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 PublicSiteNav from '../components/PublicSiteNav';
import { publicCoachSite } from '../coachingSite';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';

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]',
  gold: 'text-[#35b7a5]',
  border: 'border-[#19192d]/10',
  surface: 'bg-white',
  softSurface: 'bg-[#fffdf9]',
  darkPanel: 'bg-[#19192d] text-white',
  darkMuted: 'text-white/70',
  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 ',
  softCard: 'rounded-none border border-[#19192d]/10 bg-[#fffdf9]',
  overline: 'text-sm font-bold uppercase tracking-[0.28em] text-[#35b7a5]',
  heading: 'font-serif font-semibold tracking-tight text-[#19192d]',
};

const trustItems = [
  'Coach-reviewed AI',
  'Private client records',
  'Built for coaching',
];

const stats = [
  [
    '30 min',
    'saved after every session with structured notes and follow-up drafts',
  ],
  ['23 days', 'between sessions where client momentum needs support'],
  [
    '6 outputs',
    'summary, commitments, blockers, homework, prep, and client notes',
  ],
];

const audiences = [
  [
    'Founders in transition',
    'Leaders moving from founder-led decisions to a stronger operating team.',
  ],
  [
    'Senior operators',
    'Executives carrying complex teams, unclear ownership, and pressure from every side.',
  ],
  [
    'Leadership teams',
    'Small teams that need cleaner decision rights, meeting rhythm, and follow-through.',
  ],
];

const specialties = [
  'Delegation and decision rights',
  'Founder visibility and executive presence',
  'Operating rhythm and accountability',
  'Difficult conversations and feedback',
  'Board, investor, and senior-team communication',
  'Leadership transition from doing to leading',
];

const workflow = [
  [
    'After every session',
    'Capture themes, commitments, patterns, and follow-up copy while the coach stays present.',
  ],
  [
    'Between sessions',
    'Keep clients connected to approved notes, resources, and action items inside their portal.',
  ],
  [
    'Before the next session',
    'Surface open commitments, recent patterns, and a focused opening question.',
  ],
];

const trustCards = [
  [
    'Your method',
    'Capture language, frameworks, and recurring patterns from real sessions.',
  ],
  [
    'Your approval',
    'Review notes, prompts, resources, and messages before they reach the client.',
  ],
  [
    'Your data',
    'Keep client records structured around confidentiality and role-based access.',
  ],
  [
    'Your client portal',
    'Share only the commitments, resources, and reflections that move the work forward.',
  ],
];

function WaveDivider({
  from = '#fffdf9',
  to = '#19192d',
  flip = false,
}: {
  from?: string;
  to?: string;
  flip?: boolean;
}) {
  return (
    <div
      className='relative h-28 overflow-hidden'
      style={{ backgroundColor: from }}
    >
      <svg
        className={`absolute inset-x-0 bottom-0 h-full w-full ${flip ? 'rotate-180' : ''}`}
        viewBox='0 0 1440 160'
        preserveAspectRatio='none'
        aria-hidden='true'
      >
        <path
          fill={to}
          d='M0,96 C180,122 330,136 520,124 C720,112 865,58 1090,72 C1248,82 1356,106 1440,96 L1440,160 L0,160 Z'
        />
      </svg>
    </div>
  );
}

export default function Starter() {
  return (
    <>
      <Head>
        <title>{getPageTitle('Coaching Workspace')}</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]'>
            Still human
          </p>
          <p className='mt-2 text-xl font-medium md:text-2xl'>
            AI is not a coach. Keep the real relationship at the center.
          </p>
          <p className='mt-2 text-base text-white/90 md:text-lg'>
            Launch a modern coaching workspace.
            <Link
              href='/login/'
              className='ml-2 font-semibold underline decoration-white underline-offset-4'
            >
              Open workspace
            </Link>
          </p>
        </div>

        <PublicSiteNav />

        <section className='mx-auto max-w-7xl px-5 pb-16 pt-7 text-center lg:px-8'>
          <div className='mx-auto max-w-4xl'>
            <p className={`mb-6 ${ui.overline}`}>
              For leadership and executive coaches
            </p>
            <h1
              className={`${ui.heading} text-5xl leading-[1.08] md:text-6xl xl:text-[5.4rem]`}
            >
              What happens when your best coaching{' '}
              <span className={ui.accent}>keeps going.</span>
            </h1>
            <p
              className={`mx-auto mt-7 max-w-3xl text-xl leading-8 md:text-2xl md:leading-9 ${ui.muted}`}
            >
              Show up fully present. No note-taking. No admin. Your workspace
              captures what makes your coaching yours, so clients stay connected
              to the work between sessions.
            </p>
            <div className='mt-9 flex justify-center'>
              <Link
                href={publicCoachSite.assessmentPath}
                className={`rounded-none px-10 py-5 text-lg font-semibold ${ui.button}`}
              >
                Book assessment
              </Link>
            </div>
            <p className={`mt-5 text-lg ${ui.muted}`}>
              $14/client/month. Everything included.
            </p>
            <div
              className={`mx-auto mt-7 flex max-w-3xl flex-wrap justify-center gap-x-9 gap-y-4 text-lg ${ui.muted}`}
            >
              {trustItems.map((item) => (
                <span key={item} className='flex items-center gap-2'>
                  <span className={ui.accent}>✦</span>
                  {item}
                </span>
              ))}
            </div>
          </div>

          <div className={`mx-auto mt-12 max-w-5xl overflow-hidden border ${ui.border}`}>
            <Image
              src='/images/coaching/coaching-session.jpg'
              alt='Executive coach and founder in a focused coaching conversation'
              width={1672}
              height={941}
              sizes='(min-width: 1024px) 72vw, 100vw'
              className='aspect-[16/9] w-full object-cover'
              priority
            />
          </div>

          <div className='relative mx-auto mt-12 max-w-4xl'>
            <div
              className={`relative rounded-none border p-4  ${ui.border} ${ui.surface}`}
            >
              <div className={`rounded-none p-4 ${ui.darkPanel}`}>
                <div className='mb-4 flex items-center justify-between'>
                  <div>
                    <p className='text-xs uppercase tracking-[0.16em] text-[#35b7a5]'>
                      Session insights
                    </p>
                    <h2 className='mt-1 text-2xl font-semibold'>
                      Maya Chen · Session 4
                    </h2>
                  </div>
                  <span className='rounded-none bg-[#35b7a5] px-3 py-1 text-sm font-semibold text-white'>
                    Review
                  </span>
                </div>

                <div className='grid grid-cols-1 gap-3 md:grid-cols-3'>
                  {[
                    'Delegation trust',
                    'Decision rights',
                    'Founder visibility',
                  ].map((topic) => (
                    <div key={topic} className='rounded-none bg-white/10 p-4'>
                      <p className='text-sm font-medium text-white'>{topic}</p>
                    </div>
                  ))}
                </div>

                <div className='mt-4 rounded-none bg-white p-5 text-[#19192d]'>
                  <p
                    className={`text-sm font-semibold uppercase tracking-[0.14em] ${ui.gold}`}
                  >
                    Commitments
                  </p>
                  <ul className='mt-4 space-y-3 text-sm leading-6'>
                    <li>Draft a decision-rights matrix before Friday.</li>
                    <li>
                      Choose three decisions the team can own without founder
                      approval.
                    </li>
                    <li>Review customer escalation rules with the COO.</li>
                  </ul>
                </div>

                <div className='mt-4 grid grid-cols-1 gap-4 lg:grid-cols-[0.9fr_1.1fr]'>
                  <div className='rounded-none bg-white/10 p-5'>
                    <p className='text-sm font-semibold text-[#35b7a5]'>
                      Pattern
                    </p>
                    <p className={`mt-2 leading-7 ${ui.darkMuted}`}>
                      Maya is moving from control as quality assurance toward
                      explicit decision boundaries.
                    </p>
                  </div>
                  <div className='rounded-none bg-white/10 p-5'>
                    <p className='text-sm font-semibold text-[#35b7a5]'>
                      Follow-up draft
                    </p>
                    <p className={`mt-2 leading-7 ${ui.darkMuted}`}>
                      This week is about making delegation visible enough that
                      trust can become operational.
                    </p>
                  </div>
                </div>
              </div>

              <div
                className={`absolute -bottom-8 right-8 hidden w-80 p-5 text-left lg:block ${ui.card}`}
              >
                <p
                  className={`text-xs font-semibold uppercase tracking-[0.16em] ${ui.gold}`}
                >
                  Client message
                </p>
                <p className={`mt-3 leading-7 ${ui.muted}`}>
                  “The board conversation went better than expected. I led with
                  the narrative instead of defending the roadmap.”
                </p>
                <p
                  className={`mt-4 rounded-none p-3 text-sm font-medium ${ui.softSurface}`}
                >
                  Suggested reply: What changed in the room when you led that
                  way?
                </p>
              </div>
            </div>
          </div>
        </section>

        <section
          className={`border-y px-5 py-10 ${ui.border} ${ui.softSurface}`}
        >
          <div className='mx-auto grid max-w-7xl grid-cols-1 gap-6 md:grid-cols-3'>
            {stats.map(([value, label]) => (
              <div key={value} className={`border-l pl-5 ${ui.border}`}>
                <p className={`${ui.heading} text-5xl`}>{value}</p>
                <p className={`mt-3 max-w-sm leading-7 ${ui.muted}`}>{label}</p>
              </div>
            ))}
          </div>
        </section>

        <section className={ui.section}>
          <div className='grid grid-cols-1 gap-10 lg:grid-cols-[0.9fr_1.1fr]'>
            <div>
              <p className={ui.overline}>Who this is for</p>
              <h2
                className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}
              >
                Coaching for leaders who need the work to continue after the call.
              </h2>
              <p className={`mt-6 text-lg leading-8 ${ui.muted}`}>
                The public site should make the coach&apos;s niche obvious before
                a visitor reaches the intake form. These starter segments and
                specialties can be personalized for each coach.
              </p>
            </div>
            <div className='grid grid-cols-1 gap-4'>
              {audiences.map(([title, copy]) => (
                <div key={title} className={`p-6 ${ui.card}`}>
                  <h3 className='text-xl font-semibold'>{title}</h3>
                  <p className={`mt-3 leading-7 ${ui.muted}`}>{copy}</p>
                </div>
              ))}
            </div>
          </div>

          <div className='mt-10 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3'>
            {specialties.map((item) => (
              <div
                key={item}
                className={`border-l-4 border-[#35b7a5] p-4 font-semibold ${ui.softSurface}`}
              >
                {item}
              </div>
            ))}
          </div>
        </section>

        <section id='how-it-works' className={ui.section}>
          <div className='grid grid-cols-1 gap-10 lg:grid-cols-[0.8fr_1.2fr]'>
            <div>
              <p className={ui.overline}>The new practice rhythm</p>
              <h2
                className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}
              >
                Before, between, and after every session.
              </h2>
            </div>
            <div className='grid grid-cols-1 gap-4'>
              {workflow.map(([title, copy], index) => (
                <div
                  key={title}
                  className={`grid grid-cols-[3rem_1fr] gap-5 p-5 ${ui.card}`}
                >
                  <div className='flex h-12 w-12 items-center justify-center rounded-none bg-[#35b7a5] font-semibold text-white'>
                    {index + 1}
                  </div>
                  <div>
                    <h3 className='text-xl font-semibold'>{title}</h3>
                    <p className={`mt-2 leading-7 ${ui.muted}`}>{copy}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        <WaveDivider from='#fffdf9' to='#19192d' />

        <section
          id='session-memory'
          className={`px-5 pb-20 pt-10 ${ui.darkPanel}`}
        >
          <div className='mx-auto grid max-w-7xl grid-cols-1 gap-10 lg:grid-cols-[0.95fr_1.05fr] lg:px-8'>
            <div className='flex flex-col justify-center'>
              <p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#35b7a5]'>
                Session memory
              </p>
              <h2 className='mt-4 font-serif text-5xl font-semibold leading-tight md:text-6xl'>
                Stop opening old notes before every call.
              </h2>
              <p className={`mt-6 text-lg leading-8 ${ui.darkMuted}`}>
                The workspace pulls together open commitments, themes across
                sessions, client messages, and a suggested opening question. You
                review everything first.
              </p>
              <div className='mt-8 grid grid-cols-2 gap-4'>
                {[
                  'Open commitments',
                  'Client patterns',
                  'Shared notes',
                  'Prep questions',
                ].map((item) => (
                  <div
                    key={item}
                    className='rounded-none border border-white/10 bg-white/5 p-4'
                  >
                    <p className='font-semibold'>{item}</p>
                  </div>
                ))}
              </div>
            </div>

            <div
              className={`rounded-none border p-5 ${ui.border} ${ui.surface} ${ui.ink}`}
            >
              <div
                className={`flex flex-wrap items-center justify-between gap-4 border-b pb-5 ${ui.border}`}
              >
                <div>
                  <p
                    className={`text-sm font-semibold uppercase tracking-[0.16em] ${ui.gold}`}
                  >
                    Session prep
                  </p>
                  <h3 className='mt-1 text-2xl font-semibold'>
                    Maya Chen · Session 5
                  </h3>
                </div>
                <span className='rounded-none bg-[#fffdf9] px-4 py-2 text-sm font-semibold text-[#35b7a5]'>
                  Ready when you are
                </span>
              </div>

              <div className='mt-5 grid grid-cols-3 gap-3'>
                {[
                  ['4', 'messages'],
                  ['2', 'open commitments'],
                  ['3', 'goals in focus'],
                ].map(([value, label]) => (
                  <div
                    key={label}
                    className={`rounded-none p-4 ${ui.softSurface}`}
                  >
                    <p className='text-3xl font-semibold'>{value}</p>
                    <p className={`mt-1 text-sm ${ui.muted}`}>{label}</p>
                  </div>
                ))}
              </div>

              <div className={`mt-5 rounded-none border p-5 ${ui.border}`}>
                <p
                  className={`text-sm font-semibold uppercase tracking-[0.14em] ${ui.gold}`}
                >
                  Top thread
                </p>
                <p className='mt-3 text-lg font-semibold'>
                  Decision rights are clear on paper, but still feel risky in
                  practice.
                </p>
                <p className={`mt-3 leading-7 ${ui.muted}`}>
                  The last two sessions both returned to trust, escalation
                  rules, and what Maya needs to see before stepping back.
                </p>
              </div>

              <div className={`mt-5 rounded-none p-5 ${ui.darkPanel}`}>
                <p className='text-sm font-semibold text-[#35b7a5]'>
                  Suggested opening
                </p>
                <p className='mt-3 text-xl leading-8'>
                  “Where did delegation feel cleaner this week, and where did
                  your body still want to take the wheel?”
                </p>
              </div>
            </div>
          </div>
        </section>

        <WaveDivider from='#fffdf9' to='#19192d' flip />

        <section id='trust' className={`${ui.section} pt-10`}>
          <div className='grid grid-cols-1 gap-10 lg:grid-cols-[0.9fr_1.1fr]'>
            <div>
              <p className={ui.overline}>Coach supervised</p>
              <h2
                className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}
              >
                The AI proposes. The coach decides.
              </h2>
              <p className={`mt-6 text-lg leading-8 ${ui.muted}`}>
                Private notes stay private. Shared notes are approved.
                Client-facing content carries the coach&apos;s voice, not a
                generic chatbot voice.
              </p>
            </div>
            <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
              {trustCards.map(([title, copy]) => (
                <div key={title} className={`p-6 ${ui.card}`}>
                  <h3 className='text-xl font-semibold'>{title}</h3>
                  <p className={`mt-3 leading-7 ${ui.muted}`}>{copy}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section id='events' className={`px-5 py-20 ${ui.softSurface}`}>
          <div className='mx-auto max-w-7xl'>
            <div className='mb-8 flex flex-col justify-between gap-4 md:flex-row md:items-end'>
              <div>
                <p className={ui.overline}>Built with coaches</p>
                <h2 className={`${ui.heading} mt-4 text-5xl`}>
                  Designed for real client work.
                </h2>
              </div>
              <Link
                href={publicCoachSite.assessmentPath}
                className={`rounded-none px-6 py-3 text-center font-semibold ${ui.button}`}
              >
                Book assessment
              </Link>
            </div>
            <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
              {publicCoachSite.testimonials.map((item) => (
                <figure key={item.name} className={`p-6 ${ui.card}`}>
                  <blockquote className={`leading-8 ${ui.ink}`}>
                    “{item.quote}”
                  </blockquote>
                  <figcaption className='mt-6'>
                    <p className='font-semibold'>{item.name}</p>
                    <p className={`text-sm ${ui.muted}`}>{item.role}</p>
                  </figcaption>
                </figure>
              ))}
            </div>
          </div>
        </section>

        <section id='pricing' className='px-5 py-20'>
          <div
            className={`mx-auto grid max-w-7xl grid-cols-1 overflow-hidden rounded-none border lg:grid-cols-[0.9fr_1.1fr] ${ui.border} ${ui.darkPanel}`}
          >
            <div className='p-8 md:p-12'>
              <p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#35b7a5]'>
                Template package
              </p>
              <h2 className='mt-4 font-serif text-5xl font-semibold leading-tight'>
                Launch a coaching practice with the workspace already inside.
              </h2>
            </div>
            <div className={`p-8 md:p-12 ${ui.surface} ${ui.ink}`}>
              <h3 className='text-2xl font-semibold'>Executive Momentum</h3>
              <p className={`mt-3 leading-7 ${ui.muted}`}>
                A ready-made package page, client records, session memory, prep
                briefs, resources, and portal flow.
              </p>
              <div className='mt-7 grid grid-cols-1 gap-3 sm:grid-cols-2'>
                {[
                  '6 coaching sessions',
                  'AI-assisted session notes',
                  'Shared resources',
                  'Client portal access',
                ].map((item) => (
                  <div
                    key={item}
                    className={`rounded-none p-4 font-medium ${ui.softSurface}`}
                  >
                    {item}
                  </div>
                ))}
              </div>
              <Link
                href={publicCoachSite.assessmentPath}
                className={`mt-8 inline-flex rounded-none px-7 py-4 font-semibold ${ui.button}`}
              >
                Book assessment
              </Link>
            </div>
          </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 Coaching SaaS Workspace. Coaching beyond the session.</p>
            <div className='flex gap-5'>
              <Link href='/privacy-policy/'>Privacy Policy</Link>
              <Link href='/terms-of-use/'>Terms of Use</Link>
              <Link href='/about/'>About</Link>
              <Link href='/services/'>Packages</Link>
              <Link href='/login/'>Login</Link>
            </div>
          </div>
        </footer>
      </main>
    </>
  );
}

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