import React from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
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 weekSteps = [
  {
    eyebrow: 'Session day',
    title: 'You coach. The workspace captures.',
    copy: 'Run the session the way you already do. Drop in raw notes, transcript snippets, or a quick debrief, then let the workspace organize themes, commitments, breakthroughs, and follow-up opportunities.',
    proof: 'Zero extra admin after the session you already ran.',
    mockup: 'capture',
  },
  {
    eyebrow: 'After',
    title: 'Review the notes before anything is shared.',
    copy: 'Session memory turns rough material into coach-readable notes: summary, patterns, commitments, homework, and follow-up copy. You edit what needs your voice and approve only what is ready.',
    proof: 'Nothing reaches the client without your explicit action.',
    mockup: 'review',
  },
  {
    eyebrow: 'Between',
    title: 'Your client stays connected to the work.',
    copy: 'Clients keep seeing approved prompts, resources, and action items that reference the real language of their sessions. The support feels like it comes from the coach, not a generic chatbot.',
    proof: 'You stay present without manually texting every follow-up.',
    mockup: 'between',
  },
  {
    eyebrow: 'Before next',
    title: 'Walk in with the thread already visible.',
    copy: 'Before the next session, prep briefs surface what happened last time, what changed since, what is still open, and where the next conversation could start.',
    proof: 'No more spending the first 15 minutes reconnecting.',
    mockup: 'prep',
  },
  {
    eyebrow: 'Ongoing',
    title: 'Your method becomes a reusable client space.',
    copy: 'When the engagement ends, the same client portal can keep approved notes, resources, commitments, and coaching context in one place.',
    proof: 'A cleaner client experience and a stronger coaching signature.',
    mockup: 'space',
  },
];

const processSteps = [
  {
    title: 'Assessment',
    copy: 'A prospective client submits goals, role context, current pressure points, and what they want from coaching.',
    output: 'Intake lead and prep context for the coach.',
  },
  {
    title: 'Coaching engagement',
    copy: 'The coach converts the lead into a client workspace, runs sessions, and keeps relationship context in one place.',
    output: 'Client profile, session history, resources, and commitments.',
  },
  {
    title: 'Session memory',
    copy: 'After each session, the coach records or uploads audio, reviews the transcript, and generates a coach-owned memory draft.',
    output: 'Summary, topics, commitments, homework, quotes, and private coach notes.',
  },
  {
    title: 'Approved follow-up',
    copy: 'The coach edits what AI produced and chooses what becomes client-facing. Nothing is shared automatically.',
    output: 'Approved notes, action items, resources, and follow-up copy.',
  },
  {
    title: 'Client portal',
    copy: 'The client logs in to see only the work the coach approved: shared notes, commitments, reflections, and resources.',
    output: 'A private client area that keeps progress visible between sessions.',
  },
];

const deeperItems = [
  [
    'Session Notes & Coaching Insights',
    'What the AI extracts from raw notes and how the coach reviews it.',
  ],
  [
    'Between-Session Support',
    'How approved reflection prompts and commitments keep clients moving.',
  ],
  [
    'Session Preparation',
    'How briefs bring back context before the next call.',
  ],
  [
    'Client Portal',
    'What your clients see after you share approved notes and resources.',
  ],
];

const clientExperience = [
  [
    'Your name, your voice',
    'Clients see coaching support from you, reviewed and approved by you.',
  ],
  [
    'Connected to real sessions',
    'Prompts reference actual goals, commitments, and language.',
  ],
  [
    'Private by default',
    'Client records are organized around confidentiality and role-based access.',
  ],
  [
    'Easy to introduce',
    'Use the portal as a clean home for notes, resources, and next actions.',
  ],
];

const faq = [
  [
    'How fast do I get the first session memory?',
    'Paste notes or a transcript after a session and generate structured memory immediately.',
  ],
  [
    'Do coaches need to change their workflow?',
    'No. The template supports raw notes, transcripts, resources, prep briefs, and client follow-up around the coaching workflow you already use.',
  ],
  [
    'Can the coach edit AI output?',
    'Yes. Every generated insight, prompt, and shared note is meant to be reviewed before the client sees it.',
  ],
  [
    'Can I start with one client?',
    'Yes. The workspace is built so a coach can test the full loop with a single client first.',
  ],
];

function Nav() {
  return (
    <header className='sticky top-3 z-50 px-5 pt-5'>
      <div
        className={`mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-2.5 backdrop-blur-xl md:px-5 md:py-3 ${ui.navShell}`}
      >
        <Link
          href='/'
          className='flex items-center gap-3 text-lg font-semibold tracking-tight'
        >
          <span className='flex h-9 w-9 items-center justify-center rounded-none bg-[#fffdf9] text-xl font-black text-[#35b7a5]'>
            C
          </span>
          <span className='sr-only'>Coaching SaaS Workspace</span>
        </Link>
        <nav
          className={`hidden items-center gap-6 text-base font-medium ${ui.ink} md:flex`}
        >
          <Link href='/how-it-works/'>How it works</Link>
          <Link href='/about/'>About</Link>
          <Link href='/services/'>Packages</Link>
          <Link href='/client-portal/'>Client login</Link>
          <a href='#client-experience'>Compare</a>
          <a href='#control'>Trust</a>
        </nav>
        <Link
          href='/intake/'
          className={`rounded-none px-5 py-2.5 text-sm font-semibold ${ui.button}`}
        >
          Start assessment
        </Link>
      </div>
      <nav
        className={`mx-auto mt-2 flex max-w-6xl gap-4 overflow-x-auto border border-[#19192d]/10 bg-white px-4 py-3 text-sm font-semibold ${ui.ink} md:hidden`}
      >
        <Link href='/how-it-works/'>How it works</Link>
        <Link href='/about/'>About</Link>
        <Link href='/services/'>Packages</Link>
        <Link href='/client-portal/'>Client login</Link>
      </nav>
    </header>
  );
}

function WaveDivider({
  from = '#fffdf9',
  to = '#19192d',
  flip = false,
}: {
  from?: string;
  to?: string;
  flip?: boolean;
}) {
  return (
    <div
      className='relative h-24 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>
  );
}

function Mockup({ type }: { type: string }) {
  if (type === 'capture') {
    return (
      <div className={`${ui.card} p-5`}>
        <div className='flex items-center justify-between border-b border-[#19192d]/10 pb-4'>
          <p className={`${ui.overline} text-xs`}>Recording</p>
          <span className='rounded-none bg-[#fffdf9] px-3 py-1 text-sm font-semibold text-[#35b7a5]'>
            Zoom connected
          </span>
        </div>
        <div className='mt-6 text-center'>
          <p className='font-serif text-6xl font-semibold'>38:12</p>
          <p className={`mt-2 ${ui.muted}`}>
            Session 4 · Leadership transition
          </p>
        </div>
        <div className='mt-6 grid gap-3'>
          {[
            'Key themes & patterns',
            'Client commitments',
            'Breakthrough moments',
            'Reflection opportunities',
          ].map((item) => (
            <div
              key={item}
              className='flex items-center gap-3 rounded-none bg-[#fffdf9] p-3'
            >
              <span className='flex h-7 w-7 items-center justify-center rounded-none bg-[#35b7a5] text-sm text-white'>
                ✓
              </span>
              <span className='font-medium'>{item}</span>
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (type === 'review') {
    return (
      <div className={`${ui.card} p-5`}>
        <p className={`${ui.overline} text-xs`}>Session notes</p>
        <h3 className='mt-2 text-2xl font-semibold'>
          Sarah Mitchell · Session 4
        </h3>
        <div className='mt-5 rounded-none bg-[#fffdf9] p-4'>
          <p className='text-sm font-semibold text-[#35b7a5]'>Summary</p>
          <p className='mt-2 leading-7'>
            Explored over-preparing for presentations and the shift from proving
            competence to trusting it.
          </p>
        </div>
        <div className='mt-4 flex flex-wrap gap-2'>
          {['Confidence', 'Delegation', 'Breakthrough'].map((item) => (
            <span
              key={item}
              className='rounded-none bg-[#fffdf9] px-3 py-1 text-sm font-semibold text-[#35b7a5]'
            >
              {item}
            </span>
          ))}
        </div>
        <div className='mt-5 flex gap-3'>
          <button
            className={`rounded-none px-5 py-3 font-semibold ${ui.button}`}
          >
            Looks good
          </button>
          <button className='rounded-none border border-[#19192d]/10 px-5 py-3 font-semibold'>
            Edit
          </button>
        </div>
      </div>
    );
  }

  if (type === 'between') {
    return (
      <div className={`${ui.card} p-5`}>
        <div className='mb-5 flex items-center justify-between'>
          <p className={`${ui.overline} text-xs`}>Between sessions</p>
          <span className={ui.muted}>Day 3</span>
        </div>
        <div className='space-y-4'>
          <div className='rounded-none bg-[#fffdf9] p-4'>
            <p className='text-sm font-semibold text-[#72798a]'>You sent</p>
            <p className='mt-2 leading-7'>
              Last session you mentioned confidence feels different in small
              groups vs large meetings. What did you notice this week?
            </p>
          </div>
          <div className='ml-8 rounded-none bg-white p-4 ring-1 ring-[#19192d]/10'>
            <p className='text-sm font-semibold'>Sarah Mitchell</p>
            <p className='mt-2 leading-7'>
              I led the Monday standup and it felt easier. I think naming it
              helped.
            </p>
          </div>
          <div className='rounded-none bg-[#fffdf9] p-4'>
            <p className='text-sm font-semibold text-[#35b7a5]'>
              Coach-approved suggestion
            </p>
            <p className='mt-2 leading-7'>
              That is a real shift. What made it feel easier?
            </p>
          </div>
        </div>
      </div>
    );
  }

  if (type === 'prep') {
    return (
      <div className={`${ui.card} p-5`}>
        <p className={`${ui.overline} text-xs`}>Prep brief</p>
        <h3 className='mt-2 text-2xl font-semibold'>Session 5</h3>
        <div className='mt-5 grid gap-3'>
          <div className='rounded-none bg-[#fffdf9] p-4'>
            <p className='font-semibold'>Last session themes</p>
            <p className={`mt-2 ${ui.muted}`}>
              Confidence · Delegation · Board presence
            </p>
          </div>
          <div className='rounded-none bg-[#fffdf9] p-4'>
            <p className='font-semibold'>Open commitments</p>
            <p className={`mt-2 ${ui.muted}`}>
              Lead Monday standup without notes. Delegate Q2 report.
            </p>
          </div>
          <div className={`${ui.darkPanel} rounded-none p-4`}>
            <p className='text-sm font-semibold text-[#35b7a5]'>
              Suggested opening
            </p>
            <p className='mt-2 leading-7'>
              How did the standup go? You sounded energized about it on Day 3.
            </p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className={`${ui.card} p-5`}>
      <div className={`${ui.darkPanel} rounded-none p-5`}>
        <p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#35b7a5]'>
          Your coaching space
        </p>
        <h3 className='mt-2 text-2xl font-semibold'>Sarah&apos;s Coaching</h3>
        <p className={`mt-2 ${ui.darkMuted}`}>Private · coach-approved</p>
      </div>
      <div className='mt-4 space-y-3'>
        {['Messages', 'Notes', 'Commitments', 'Resources'].map((item) => (
          <div
            key={item}
            className='flex items-center justify-between rounded-none bg-[#fffdf9] p-4'
          >
            <span className='font-medium'>{item}</span>
            <span className={ui.accent}>→</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function StepSection({
  step,
  index,
}: {
  step: (typeof weekSteps)[number];
  index: number;
}) {
  const text = (
    <div>
      <p className={ui.overline}>{step.eyebrow}</p>
      <p className={`mt-5 font-serif text-6xl font-semibold ${ui.accent}`}>
        {index + 1}
      </p>
      <h2 className={`${ui.heading} mt-5 text-4xl leading-tight md:text-5xl`}>
        {step.title}
      </h2>
      <p className={`mt-5 text-lg leading-8 ${ui.muted}`}>{step.copy}</p>
      <p className='mt-6 rounded-none bg-[#fffdf9] px-5 py-4 font-semibold text-[#35b7a5]'>
        {step.proof}
      </p>
    </div>
  );

  const visual = <Mockup type={step.mockup} />;

  return (
    <section className={ui.section}>
      <div className='grid grid-cols-1 items-center gap-10 lg:grid-cols-2'>
        {index % 2 === 0 ? (
          <>
            {text}
            {visual}
          </>
        ) : (
          <>
            <div className='lg:order-2'>{text}</div>
            <div className='lg:order-1'>{visual}</div>
          </>
        )}
      </div>
    </section>
  );
}

export default function HowItWorks() {
  return (
    <>
      <Head>
        <title>{getPageTitle('How It Works')}</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>

        <Nav />

        <section className='mx-auto max-w-6xl px-5 pb-16 pt-14 text-center lg:px-8'>
          <p className={ui.overline}>How it works</p>
          <h1
            className={`${ui.heading} mx-auto mt-6 max-w-5xl text-5xl leading-[1.08] md:text-7xl`}
          >
            Your coaching week, without the admin drag.
          </h1>
          <p className={`mx-auto mt-7 max-w-3xl text-xl leading-9 ${ui.muted}`}>
            Before the session, between sessions, and after the engagement ends:
            the workspace keeps client context, session memory, and follow-up in
            one coach-supervised flow.
          </p>
          <div className='mt-9 flex flex-wrap justify-center gap-4'>
            <Link
              href='/intake/'
              className={`rounded-none px-8 py-4 font-semibold ${ui.button}`}
            >
              Start assessment
            </Link>
            <a
              href='#coaching-process'
              className='rounded-none border border-[#19192d]/10 bg-white px-8 py-4 font-semibold'
            >
              See the process
            </a>
          </div>
          <p className={`mt-5 ${ui.muted}`}>
            Start with one client. 5-minute setup. Coach-approved outputs.
          </p>
        </section>

        <section
          id='coaching-process'
          className={`border-y px-5 py-16 ${ui.border} ${ui.softSurface}`}
        >
          <div className='mx-auto max-w-7xl lg:px-8'>
            <div className='grid gap-10 lg:grid-cols-[0.85fr_1.15fr] lg:items-start'>
              <div>
                <p className={ui.overline}>The full coaching process</p>
                <h2 className={`${ui.heading} mt-4 text-4xl leading-tight md:text-6xl`}>
                  From public assessment to private client workspace.
                </h2>
                <p className={`mt-6 text-lg leading-8 ${ui.muted}`}>
                  Founder-style coaching sites explain the offer. This
                  workspace connects that public offer to the operational flow
                  behind it: intake, client management, session memory, and
                  client follow-through.
                </p>
                <div className='mt-8 flex flex-wrap gap-3'>
                  <Link
                    href='/intake/'
                    className={`rounded-none px-7 py-4 font-semibold ${ui.button}`}
                  >
                    Start assessment
                  </Link>
                  <Link
                    href='/services/'
                    className='rounded-none border border-[#19192d]/10 bg-white px-7 py-4 font-semibold'
                  >
                    View packages
                  </Link>
                </div>
              </div>

              <div className='grid gap-4'>
                {processSteps.map((step, index) => (
                  <div
                    key={step.title}
                    className={`${ui.card} grid gap-4 p-5 md:grid-cols-[4rem_1fr]`}
                  >
                    <div className='flex h-14 w-14 items-center justify-center rounded-none bg-[#19192d] font-serif text-2xl font-semibold text-white'>
                      {index + 1}
                    </div>
                    <div>
                      <h3 className='text-2xl font-semibold'>{step.title}</h3>
                      <p className={`mt-3 leading-7 ${ui.muted}`}>
                        {step.copy}
                      </p>
                      <p className='mt-4 rounded-none bg-[#fffdf9] px-4 py-3 text-sm font-semibold text-[#35b7a5]'>
                        {step.output}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section
          id='coaching-week'
          className={`border-y px-5 py-16 ${ui.border} ${ui.softSurface}`}
        >
          <div className='mx-auto max-w-6xl text-center'>
            <p className={ui.overline}>Your coaching week</p>
            <h2 className={`${ui.heading} mt-4 text-4xl md:text-6xl`}>
              What if the busywork just was not there?
            </h2>
            <p
              className={`mx-auto mt-5 max-w-3xl text-lg leading-8 ${ui.muted}`}
            >
              Five moments a week. You get your time back, your clients get
              clearer support, and your coaching signature gets stronger.
            </p>
          </div>
        </section>

        {weekSteps.map((step, index) => (
          <StepSection key={step.eyebrow} step={step} index={index} />
        ))}

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

        <section className={`px-5 pb-20 pt-10 ${ui.darkPanel}`}>
          <div className='mx-auto max-w-7xl lg:px-8'>
            <div className='grid grid-cols-1 gap-10 lg:grid-cols-[0.9fr_1.1fr]'>
              <div>
                <p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#35b7a5]'>
                  Go deeper
                </p>
                <h2 className='mt-4 font-serif text-5xl font-semibold leading-tight md:text-6xl'>
                  Curious about a specific part?
                </h2>
                <p className={`mt-6 text-lg leading-8 ${ui.darkMuted}`}>
                  Each part of the workflow can stand alone, but the real value
                  shows up when session memory, client prompts, resources, and
                  prep briefs reinforce each other.
                </p>
              </div>
              <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
                {deeperItems.map(([title, copy]) => (
                  <div
                    key={title}
                    className='rounded-none border border-white/10 bg-white/5 p-6'
                  >
                    <h3 className='text-xl font-semibold'>{title}</h3>
                    <p className={`mt-3 leading-7 ${ui.darkMuted}`}>{copy}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

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

        <section id='client-experience' className={`${ui.section} pt-10`}>
          <div className='grid grid-cols-1 items-center gap-10 lg:grid-cols-[0.95fr_1.05fr]'>
            <div className={`${ui.card} overflow-hidden`}>
              <div className={`p-6 ${ui.darkPanel}`}>
                <p className='text-sm font-semibold uppercase tracking-[0.18em] text-[#35b7a5]'>
                  Client view
                </p>
                <h3 className='mt-2 text-2xl font-semibold'>
                  Sarah&apos;s Coaching
                </h3>
                <p className={`mt-2 ${ui.darkMuted}`}>
                  Private workspace · approved by coach
                </p>
              </div>
              <div className='grid gap-4 p-6'>
                <div className='rounded-none bg-[#fffdf9] p-4'>
                  <p className='font-semibold'>Reflection prompt</p>
                  <p className={`mt-2 leading-7 ${ui.muted}`}>
                    What is one boundary you could set this week to protect
                    strategic thinking time?
                  </p>
                </div>
                <div className='rounded-none border border-[#19192d]/10 p-4'>
                  <p className='font-semibold'>Session notes 6 shared</p>
                  <p className={`mt-2 ${ui.muted}`}>
                    Board presence, CPO conversations, delegation trust.
                  </p>
                </div>
                <div className='rounded-none border border-[#19192d]/10 p-4'>
                  <p className='font-semibold'>Commitments</p>
                  <p className={`mt-2 ${ui.muted}`}>2 open · 5 done</p>
                </div>
              </div>
            </div>
            <div>
              <p className={ui.overline}>The client experience</p>
              <h2
                className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}
              >
                What your client actually sees.
              </h2>
              <p className={`mt-6 text-lg leading-8 ${ui.muted}`}>
                Your client receives support that feels like it comes from you,
                because it is based on your sessions, reviewed by you, and
                shared by you.
              </p>
              <div className='mt-8 grid grid-cols-1 gap-4 md:grid-cols-2'>
                {clientExperience.map(([title, copy]) => (
                  <div key={title} className={ui.softCard + ' p-5'}>
                    <h3 className='font-semibold'>{title}</h3>
                    <p className={`mt-2 leading-7 ${ui.muted}`}>{copy}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section id='control' className={`px-5 py-20 ${ui.softSurface}`}>
          <div className='mx-auto grid max-w-7xl grid-cols-1 gap-10 lg:grid-cols-[0.8fr_1.2fr]'>
            <div>
              <p className={ui.overline}>Coach-supervised AI</p>
              <h2
                className={`${ui.heading} mt-4 text-5xl leading-tight md:text-6xl`}
              >
                You control everything.
              </h2>
              <p className={`mt-6 text-lg leading-8 ${ui.muted}`}>
                The workspace is opinionated about one thing: AI output should
                be visible to the coach before it becomes client-facing.
              </p>
            </div>
            <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
              {[
                'You see every suggestion first',
                'You edit the wording and tone',
                'You can skip anything',
                'Your client data stays structured',
              ].map((item) => (
                <div key={item} className={`${ui.card} p-6`}>
                  <p className='text-3xl text-[#35b7a5]'>✓</p>
                  <h3 className='mt-4 text-xl font-semibold'>{item}</h3>
                </div>
              ))}
            </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]'>
                Simple pricing
              </p>
              <h2 className='mt-4 font-serif text-5xl font-semibold leading-tight'>
                One workspace for the whole coaching loop.
              </h2>
            </div>
            <div className={`p-8 md:p-12 ${ui.surface} ${ui.ink}`}>
              <p className={ui.overline}>During coaching</p>
              <h3 className='mt-3 text-4xl font-semibold'>
                $14 / client / month
              </h3>
              <p className={`mt-4 leading-7 ${ui.muted}`}>
                Everything included: session memory, prep briefs, resources,
                client portal, and approved follow-up prompts.
              </p>
              <Link
                href='/intake/'
                className={`mt-8 inline-flex rounded-none px-7 py-4 font-semibold ${ui.button}`}
              >
                Start assessment
              </Link>
            </div>
          </div>
        </section>

        <section className={`${ui.section} pt-0`}>
          <div className='mx-auto max-w-4xl'>
            <p className={`${ui.overline} text-center`}>
              Questions before you start
            </p>
            <h2
              className={`${ui.heading} mt-4 text-center text-4xl md:text-5xl`}
            >
              The questions coaches ask first.
            </h2>
            <div className='mt-10 grid gap-4'>
              {faq.map(([question, answer]) => (
                <div key={question} className={`${ui.card} p-6`}>
                  <h3 className='text-xl font-semibold'>{question}</h3>
                  <p className={`mt-3 leading-7 ${ui.muted}`}>{answer}</p>
                </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-[#35b7a5]'>
            Ready to try it?
          </p>
          <h2 className='mx-auto mt-4 max-w-3xl font-serif text-5xl font-semibold leading-tight md:text-6xl'>
            Start with one client and see the full loop.
          </h2>
          <div className='mt-8 flex justify-center'>
            <Link
              href='/intake/'
              className={`rounded-none px-8 py-4 font-semibold ${ui.button}`}
            >
              Start assessment
            </Link>
          </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>
    </>
  );
}

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