import { FunnelStepHeader } from '@/components/step/FunnelStepHeader';
import {
  usePreviewStepLocalizedContent,
  useFunnel,
  type FunnelStepMeta,
} from '@funnelsgrove/runtime';
import { getStepContentLocale } from '@/runtime/step-content-context';
import { stepOneContent } from '@/steps/content/step-01.content';

export const stepOneId = 'step-1';

export const stepOne: FunnelStepMeta = {
  id: stepOneId,
  name: 'step-1',
  type: 'intro_hero',
  figmaNodeId: 'template-01-intro',
  title: 'Build a plan that fits you',
  description: 'Lightweight opening step with no image dependencies.',
};

export function StepOne() {
  const { attributes } = useFunnel();
  const content = usePreviewStepLocalizedContent(
    stepOneId,
    stepOneContent,
    getStepContentLocale(attributes),
  );
  return (
    <>
      <section className="figma-step-screen step-one-screen" data-node-id="template:01-intro">
        <FunnelStepHeader
          className="figma-headline"
          titleAs="div"
          title={
            <>
              <p className="figma-headline-line">{content.headline[0]}</p>
              <p className="figma-headline-line is-accent">{content.headline[1]}</p>
              <p className="figma-headline-line">{content.headline[2]}</p>
            </>
          }
        />

        <div className="template-starter-art" aria-hidden>
          <span className="template-starter-orbit template-starter-orbit-one" />
          <span className="template-starter-orbit template-starter-orbit-two" />
          <span className="template-starter-mark">✓</span>
        </div>
      </section>

      {stepOneStyles ? <style>{stepOneStyles}</style> : null}
    </>
  );
}

const stepOneStyles = `
.step-one-screen {
  --sprite-offset-x: 0px;
  background: var(--color-bg-warning);
}

.step-one-screen .figma-headline-line.is-accent {
  color: var(--color-primary);
}

.template-starter-art {
  position: absolute;
  top: 340px;
  left: 50%;
  width: min(72cqw, 310px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 12%, white);
  transform: translateX(-50%);
}

.template-starter-orbit {
  position: absolute;
  inset: 14%;
  border: 2px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
  border-radius: 42% 58% 54% 46%;
  transform: rotate(24deg);
}

.template-starter-orbit-two {
  inset: 26%;
  transform: rotate(-32deg);
}

.template-starter-mark {
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  border-radius: 30px;
  background: var(--color-primary);
  color: white;
  font-size: 52px;
  font-weight: 800;
  box-shadow: 0 22px 50px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

@media (max-width: 430px) {
  .template-starter-art {
    top: 310px;
  }
}
`;