import React, { ReactNode } from 'react';

import { GRADIENT, MONO, SANS } from '../signup-mirror/theme';

const OUTLINE_BTN = `w-full px-[14px] py-3 rounded-[10px] bg-[#f6f6f7] border border-[#e1e3e5] text-[#202223] ${SANS} text-[13.5px] font-semibold cursor-pointer transition-colors hover:enabled:border-[#c9cccf] hover:enabled:bg-[#eef0f1] disabled:text-[#8c9196] disabled:cursor-not-allowed`;

const GRADIENT_BTN = `w-full px-[14px] py-3 rounded-[10px] border-none cursor-pointer ${GRADIENT} text-white ${SANS} text-[13.5px] font-semibold shadow-[0_4px_16px_rgba(200,23,93,0.2)] transition hover:brightness-110 hover:-translate-y-px`;

function PathCard({
  eyebrow,
  title,
  children,
  note,
  actions,
}: {
  eyebrow: string;
  title: string;
  children: ReactNode;
  note?: string;
  actions: ReactNode;
}): JSX.Element {
  return (
    <article className="flex-1 min-w-0 flex flex-col p-[20px_18px] bg-white border border-[#e1e3e5] rounded-[14px] transition-colors hover:border-[#c9cccf]">
      <div
        className={`${MONO} text-[10.5px] tracking-[0.16em] uppercase text-[#8c9196] mb-2.5`}
      >
        {eyebrow}
      </div>
      <h3 className="text-[17px] font-bold tracking-[-0.01em] text-[#202223] mb-[9px]">
        {title}
      </h3>
      <p className="text-[13px] leading-[1.55] text-[#6d7175]">{children}</p>
      {note && (
        <p className="text-[11.5px] leading-[1.5] text-[#8c9196] mt-2">
          {note}
        </p>
      )}
      <div className="mt-auto pt-4 flex flex-col gap-[9px]">{actions}</div>
    </article>
  );
}

export function SetupPaths({
  bookingEnabled,
  onRunYourself,
  onOpenCopilot,
  onBookSetup,
  onInvite,
  onAgency,
}: {
  bookingEnabled: boolean;
  onRunYourself: () => void;
  onOpenCopilot: () => void;
  onBookSetup: () => void;
  onInvite: () => void;
  onAgency: () => void;
}): JSX.Element {
  return (
    <div className="grid grid-cols-1 gap-4 items-stretch min-[900px]:grid-cols-4">
      <PathCard
        eyebrow="Hands on"
        title="Run it yourself"
        actions={
          <button type="button" onClick={onRunYourself} className={OUTLINE_BTN}>
            Start with your Company ID →
          </button>
        }
      >
        Full control over every detail, down to the smallest setting. Recomaze
        Copilot guides you through the process whenever you need help or have a
        question.
      </PathCard>

      <PathCard
        eyebrow="Hands off"
        title="Let Copilot run it"
        actions={
          <button
            type="button"
            onClick={onOpenCopilot}
            className={GRADIENT_BTN}
          >
            Open Copilot →
          </button>
        }
      >
        Copilot interviews you, drafts your Company ID, and proposes the setup.
        You approve it once, and it operates: scanning for gaps, writing the
        content, publishing what you&apos;ve cleared for autopilot, and asking
        you when a decision is yours to make.
      </PathCard>

      <PathCard
        eyebrow="With our team"
        title="Set it up with us"
        actions={
          <button
            type="button"
            onClick={onBookSetup}
            disabled={!bookingEnabled}
            className={OUTLINE_BTN}
          >
            Book your setup hour →
          </button>
        }
      >
        Book a call and we&apos;ll do the full setup together with you, in one
        hour.
      </PathCard>

      <PathCard
        eyebrow="With your agency or expert"
        title="Bring your agency or expert"
        actions={
          <>
            <button type="button" onClick={onInvite} className={GRADIENT_BTN}>
              Invite them →
            </button>
            <button type="button" onClick={onAgency} className={OUTLINE_BTN}>
              I&apos;m an agency or expert
            </button>
          </>
        }
      >
        Already work with an agency, or an expert who runs your marketing?
        Invite them to run the setup for you.{' '}
        <span className="font-bold text-[#15803d] bg-[#dcfce7] rounded-[4px] px-1 py-px box-decoration-clone">
          You get 10,000 extra credits during your trial
        </span>{' '}
        when they take care of it.
      </PathCard>
    </div>
  );
}