import React, { Fragment } from 'react';

import { LoopStep } from '../../lib/onboarding-chain/content';
import { GRADIENT, MONO } from '../signup-mirror/theme';

const STAGGER = 0.26;

function ChainArrow({ index }: { index: number }): JSX.Element {
  return (
    <div
      data-rcm-anim
      style={{
        animation: `rcm-fade .55s ease ${(index * STAGGER + 0.2).toFixed(2)}s both`,
      }}
      className="flex-none flex items-center justify-center self-center rotate-90 py-[9px] text-[#C8175D] min-[940px]:rotate-0 min-[940px]:py-0 min-[940px]:self-auto min-[940px]:px-[clamp(4px,0.7vw,12px)]"
    >
      <svg
        width="22"
        height="22"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden="true"
      >
        <path d="M5 12h14" />
        <path d="m13 6 6 6-6 6" />
      </svg>
    </div>
  );
}

function ChainBox({
  step,
  index,
}: {
  step: LoopStep;
  index: number;
}): JSX.Element {
  const boxIn = `rcm-boxin .6s cubic-bezier(.22,.7,.25,1) ${(index * STAGGER).toFixed(2)}s both`;
  const animation = step.lead
    ? `${boxIn}, rcm-box1glow 1.2s ease-out ${(index * STAGGER + 0.1).toFixed(2)}s both`
    : boxIn;

  const layout =
    'flex-none w-full max-w-[520px] mx-auto flex flex-col min-w-0 rounded-[14px] p-[22px_20px] min-[940px]:flex-1 min-[940px]:max-w-none min-[940px]:mx-0';

  const leadStyle = step.lead
    ? {
        background:
          'linear-gradient(#ffffff,#ffffff) padding-box, linear-gradient(135deg,#C8175D,#7B3FE4) border-box',
        border: '1.5px solid transparent',
        boxShadow:
          '0 0 30px -10px rgba(200,23,93,.22),0 0 64px -8px rgba(123,63,228,.12)',
      }
    : {};

  return (
    <article
      data-rcm-anim
      style={{ animation, ...leadStyle }}
      className={
        step.lead ? layout : `${layout} bg-white border border-[#e1e3e5]`
      }
    >
      <div
        className={`${MONO} text-[10.5px] tracking-[0.14em] uppercase text-[#8c9196] mb-[11px]`}
      >
        Step <span className="text-[#C8175D]">{step.n}</span> · {step.phase}
      </div>
      <h2
        className={`text-[19px] font-bold tracking-[-0.01em] text-[#202223] ${
          step.lead ? '' : 'mb-3'
        }`}
      >
        {step.title}
      </h2>
      {step.lead && (
        <span
          className={`block w-9 h-[3px] mt-[9px] mb-3 rounded-sm ${GRADIENT}`}
        />
      )}
      <p className="text-[13.5px] leading-[1.55] text-[#6d7175]">{step.body}</p>
      <div
        className={`mt-auto pt-4 ${MONO} text-[10px] tracking-[0.08em] uppercase text-[#8c9196]`}
      >
        {step.footer}
      </div>
    </article>
  );
}

export function LoopChain({ steps }: { steps: LoopStep[] }): JSX.Element {
  return (
    <div className="flex flex-col items-stretch min-[940px]:flex-row">
      {steps.map((step, index) => (
        <Fragment key={step.n}>
          <ChainBox step={step} index={index} />
          {index < steps.length - 1 && <ChainArrow index={index} />}
        </Fragment>
      ))}
    </div>
  );
}