"use client";

import { m, useReducedMotion } from "motion/react";

import { manifesto } from "@/lib/portfolio";

const SURVIVE_PHRASE = "survive contact";

function splitAccentPhrase(statement: string) {
  const phraseIndex = statement.indexOf(SURVIVE_PHRASE);

  if (phraseIndex < 0) {
    return null;
  }

  return {
    before: statement.slice(0, phraseIndex),
    after: statement.slice(phraseIndex + SURVIVE_PHRASE.length),
  };
}

export function Manifesto() {
  const shouldReduceMotion = useReducedMotion();
  const accentSplit = splitAccentPhrase(manifesto);

  return (
    <m.section
      aria-labelledby="manifesto-heading"
      className="mx-auto max-w-7xl px-6 py-28 text-blacksite-muted sm:px-8 sm:py-36 lg:px-12"
      initial={shouldReduceMotion ? false : { opacity: 0, y: 18 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-15%" }}
      transition={{ duration: shouldReduceMotion ? 0 : 0.6, ease: "easeOut" }}
    >
      <p className="section-label mb-12">PRINCIPLE /.03</p>
      <h2
        id="manifesto-heading"
        className="max-w-5xl font-display text-[clamp(2.25rem,6vw,4.5rem)] font-semibold leading-[1.05] tracking-[-0.06em] text-blacksite-muted"
      >
        {accentSplit ? (
          <>
            {accentSplit.before}
            <span className="text-signal-cyan">{SURVIVE_PHRASE}</span>
            {accentSplit.after}
          </>
        ) : (
          manifesto
        )}
      </h2>
    </m.section>
  );
}