import { SpotlightReveal } from '@/components/ui/spotlight-reveal';
import { SlideIn } from '@/components/ui/slide-in';
import { SHOW_HEADER_DESCRIPTIONS, KICKER_TITLE_GAP } from '@/lib/header-config';

/**
 * Small dot-grid icon used inside the kicker pill. Ported from Originkit's
 * "Process 01" section (components/originkit/features-03.tsx,
 * public/originkit/features-03/process-icon.svg) — same paths/strokes,
 * just switched from Originkit's blue (#3385FF) to `currentColor` so it
 * always matches this site's purple.
 */
export function KickerIcon({ className = 'size-4' }) {
    return (
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} aria-hidden="true">
            <path d="M9 3H4C3.44771 3 3 3.44771 3 4V9C3 9.5523 3.44771 10 4 10H9C9.5523 10 10 9.5523 10 9V4C10 3.44771 9.5523 3 9 3Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
            <path d="M9 14H4C3.44771 14 3 14.4477 3 15V20C3 20.5523 3.44771 21 4 21H9C9.5523 21 10 20.5523 10 20V15C10 14.4477 9.5523 14 9 14Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
            <path d="M20 3H15C14.4477 3 14 3.44771 14 4V9C14 9.5523 14.4477 10 15 10H20C20.5523 10 21 9.5523 21 9V4C21 3.44771 20.5523 3 20 3Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
            <path d="M20 14H15C14.4477 14 14 14.4477 14 15V20C14 20.5523 14.4477 21 15 21H20C20.5523 21 21 20.5523 21 20V15C21 14.4477 20.5523 14 20 14Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
        </svg>
    );
}

/**
 * The pill/badge itself — same structure (rounded-full border + soft bg +
 * white ring-shadow + icon + label) as Originkit's Process-01 header pill,
 * just re-colored from Originkit's blue (#f2f7fd bg / #d4e7f6 border) to
 * this site's purple tokens (`light-purple` / `primary`).
 */
export function SectionKicker({ icon: Icon = KickerIcon, children }) {
    return (
        <div className="inline-flex items-center gap-1.5 rounded-full border border-primary/15 bg-light-purple px-3 py-1.5 text-primary shadow-[0_0_0_3px_#fff,0_2px_3px_rgba(124,58,237,0.08)]">
            <Icon className="size-4 shrink-0" />
            <span className="text-sm font-medium leading-none text-primary">{children}</span>
        </div>
    );
}

/**
 * @param {object} props
 * @param {string} [props.kicker] - badge label above the title.
 * @param {import('react').ComponentType<{className?:string}>} [props.icon] - icon for the kicker pill; defaults to the dot-grid icon above.
 * @param {string} props.title
 * @param {string} [props.accent] - trailing word, rendered in the exact same weight/style/color
 *   as `title` (no italic, no color split) — kept as a separate prop only so callers can still
 *   compose "Recent Work" as title="Recent" accent="Work" if they want to.
 * @param {string} [props.description]
 * @param {'left'|'center'} [props.align='center']
 * @param {string} [props.className='mb-12'] - margin/spacing classes for the heading block (default = 48px gap below it).
 * @param {boolean} [props.animated=true] - set false when this heading lives inside a `position: sticky`
 *   wrapper. The scroll-into-view entrance animation fights with sticky positioning (the element is
 *   already pinned/visible the moment the section is reached), which can show up as a brief visual
 *   overlap between the kicker and the title while the slide/fade transform is still playing.
 */
export function SectionHeading({ kicker, icon, title, accent, description, align = 'center', animated = true, className = 'mb-12' }) {
    const alignment = align === 'left' ? 'text-left items-start' : 'text-center items-center mx-auto';

    // Title and accent now render as one uniform style/color — no more
    // italic + purple split on the accent word.
    const titleNode = accent ? `${title} ${accent}` : title;

    const titleClassName = 'mt-4 text-(length:--text-section-title) font-semibold leading-[1.05] tracking-tight text-heading';
    const titleStyle = { marginTop: KICKER_TITLE_GAP };
    const descriptionClassName = 'mt-[5px] max-w-xl text-base leading-snug text-paragraph';

    return (
        <div className={`${className} flex max-w-2xl flex-col ${alignment}`}>
            {kicker && <SectionKicker icon={icon}>{kicker}</SectionKicker>}

            {animated ? (
                <SpotlightReveal as="h2" text={titleNode} className={titleClassName} style={titleStyle} />
            ) : (
                <h2 className={titleClassName} style={titleStyle}>{titleNode}</h2>
            )}

            {SHOW_HEADER_DESCRIPTIONS && description && (
                animated ? (
                    <SlideIn delay={0.25} y={16}>
                        <p className={descriptionClassName}>{description}</p>
                    </SlideIn>
                ) : (
                    <p className={descriptionClassName}>{description}</p>
                )
            )}
        </div>
    );
}